×
  • CSS Flexbox – Complete Beginners Guide

  • Align Items

    Lesson List

    In this lesson, we will see about the Align Items property. Align items defines the default behavior for how flex items are laid out along the cross axis.

    It works like the justify-content but in the perpendicular direction.


    Stretch – align items default value

    it means the item stretches the entire length of the cross axis.
    For e.x. we have a flex container with some height of any pixels than the items will be stretch from top to bottom.

    style.css
    
    .container {
      display: flex;
      height: 200px; /* Flex container with some height */
    }
    .align-item-stretch {
      align-items: stretch; /* Default value  */
    }
    

    and the html will be:

    index.html
    
    <div class="container"> ...
    </div>
    

    After this what we will get to display is:
    stretch


    Flex Start

    So the second value we can specify is flex-start.

    style.css
    
    .align-item-start {
      align-items: flex-start;
    }
    

    and the html will be:

    index.html
    
    <div class="container d-flex align-item-start"> ...
    </div>
    

    After this what we will get to display is:
    flex-start
    As you can see that all the items are pushed to the cross start which is the starting point of the cross axis. Remember cross-axis flows from top to bottom.


    Flex End

    Similar to flex-start we also have flex-end. Flex end pushes the item to the end of the cross axis.

    style.css
    
    .align-item-end {
      align-items: flex-end;
    }
    

    and the html will be:

    index.html
    
    <div class="container d-flex align-item-end"> ...
    </div>
    

    After this what we will get to display is:
    flex-end


    Center Align

    The fourth possible value is center which centers the content on the cross axis.

    style.css
    
    .align-item-center {
      align-items: center;
    }
    

    and the html will be:

    index.html
    
    <div class="container d-flex align-item-center"> ...
    </div>
    

    After this what we will get to display is:
    flex-center


    Baseline

    The baseline value for flex item will align flex items along with their content baseline
    baseline: description
    As you see in the above image it has 3 items A, B, C each with different height and content size. you can see how all the content in the flex items sits on the baseline.

    style.css
    
    .align-item-baseline {
      align-items: baseline;
    }
    

    and the html will be:

    index.html
    
    <div class="container d-flex align-item-baseline"> ...
    </div>
    
    Align Items

  • We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept