×
  • CSS Flexbox – Complete Beginners Guide

  • Align Content

    Lesson List

    The last property that can be applied to the flex container is the Align content property. The Property aligns the line of content along with the cross axis this is sort of a mix of justify-content and align-items. It distributes additional space but along the cross axis.

    Note: Before we start the container must contain height and width then only this property is applied also the flex-wrap: wrap property must also applied to the flex container.

    Stretch – align content default value

    style.css
    
    .container {
        display: flex;
        flex-wrap:wrap
        height: 160px;
        width:300px;
    }
    .align-content-stretch {
      align-content: stretch;
    }
    

    and the html will be:

    index.html
    
    <div class="container align-content-stretch"> ...
    </div>
    

    After this what we will get to display is:
    Align Content - stretch


    Flex Start

    So the second value we can specify is flex-start. This pulls the line to the beginning of the cross axis.

    style.css
    
    .align-content-start {
      align-content: flex-start;
    }
    

    and the html will be:

    index.html
    
    <div class="container align-content-start"> ...
    </div>
    

    After this what we will get to display is:
    Align Content - flex-start


    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-content-end {
      align-content: flex-end;
    }
    

    and the html will be:

    index.html
    
    <div class="container align-content-end"> ...
    </div>
    

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


    Center Align

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

    style.css
    
    .align-content-center {
      align-content: center;
    }
    

    and the html will be:

    index.html
    
    <div class="container align-content-center"> ...
    </div>
    

    After this what we will get to display is:
    center


    Space Between

    The another value is Space Between which takes all the extra space and puts in between the line.

    style.css
    
    .align-content-space-between {
      align-content: space-between;
    }
    

    and the html will be:

    index.html
    
    <div class="container align-content-space-between"> ...
    </div>
    

    After this what we will get to display is:
    space-between


    Space Around

    The finally we also have Space Around which distributes the space around the line. so the center portion has twice the space as the edges.

    style.css
    
    .align-content-space-around {
      align-content: space-around;
    }
    

    and the html will be:

    index.html
    
    <div class="container align-content-space-around"> ...
    </div>
    

    After this what we will get to display is:
     space-around


    DEMO

    See the Pen
    Align Content Property – Flex
    by rehmaanali (@geekstrick)
    on CodePen.

    Align Content Property
    .
    .

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    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