×
  • CSS Flexbox – Complete Beginners Guide

  • Justify Content

    Lesson List

    In this tutorial, we will look into the alignment property provided by the flex container starting off with justify-content.

    Default Value

    by default, justify-content is set to the value to the flex-start which places the item at the beginning of the main axis.

    style.css
    
    .container {
      display: flex;
      justify-content: flex-start;   /* Default Value */
    }
    

    As the main axis flows from left to right so the by default items starts from the left


    Flex End

    This causes the item to be placed at the end of the main axis.

    style.css
    
    .justify-flex-end {
      justify-content: flex-end;
    }
    

    and the markup will be :

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

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


    Center Aligned

    it is also possible to align the content at the center of the main axis and the value of the property is

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

    and the markup will be :

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

    After this what we will get to display is:
    center


    Space Between

    Flexbox also provides additional value that can control how the extra space has to be distributed so ve have a value of space-between.

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

    and the markup will be :

    index.html
    
    <div class="container d-flex justify-space-between">
      ...
    </div>
    

    After this what we will get to display is:
    space-between
    you can see that the extra space that was left out is evenly split and added in between the flex items.


    Space Around

    Sometime you might also want the space the first item and after the last item for such a scenario we have space-around value.

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

    and the markup will be :

    index.html
    
    <div class="container d-flex justify-space-around">
      ...
    </div>
    

    After this what we will get to display is:
    space-around
    The space at the beginning and at the end is half the space between the flex item.


    Space Evenly

    However, if you want the same space even at the start and at the end of the item the value can be space-evenly.

    style.css
    
    .justify-space-evenly {
      justify-content: space-evenly;
    }
    

    and the markup will be :

    index.html
    
    <div class="container d-flex justify-space-evenly">
      ...
    </div>
    

    After this what we will get to display is:
    space-evenly
    The space at the beginning and at the end is half the space between the flex item.


    what you have to keep in mind is justify-content property aligns items based on the main axis, so if we set the flex-direction to column the property will deal with vertical alignment.

    DEMO

    See the Pen
    Flex Justify Content
    by rehmaanali (@geekstrick)
    on CodePen.

    justify content

    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