×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Direction

    Lesson List

    In this lesson, we will learn about flex direction.

    It establishes the main axis which inturns besides how the flex items are placed inside the flex container by default the main axis flows from left to right which is the reason we the items placed from left to right in our previous lesson.

    By changing the property we can change how the items are placed so let’s take a look at an example.


    Flex Direction Properties

    let’s go back to our CSS file in which we will create some another common class for the properties.
    As the property accepts the 4 values. i.e.

    Value Description
    row Default value. The flexible items are displayed horizontally, as a row
    row-reverse Same as row, but in reverse order
    column The flexible items are displayed vertically, as a column
    column-reverse Same as column, but in reverse order

    Row Revers

    style.css
    
    .flex-row-reverse {
      flex-direction: row-reverse;
    }
    

    And Markup Will be

    index.html
    
      <div class="container d-flex flex-row-reverse">
        <div class="flex-item item-1">Item 1</div>
        ...
      </div>
    

    After this what we will get to display is:
    row-reverse
    as you can see the items are placed in reverse order.

    Column

    style.css
    
    .flex-column {
       flex-direction: column;
    }
    

    And Markup Will be

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

    After this what we will get to display is:
    column
    so the items are stacked upon each other.

    Column Reverse

    And Finally, we also have a column-reverse which stacks the items in the reverse order.

    style.css
    
    .flex-column-reverse {
       flex-direction: column-reverse;
    }
    

    And Markup Will be

    index.html
    
    <div class="container d-flex flex-column-reverse">
      ...
    </div>
    

    After this what we will get to display is:
    column-reverse
    As you can see the item5 is at the top and item1 is at the bottom, items flows from bottom to top.

    DEMO on Flex Direction

    See the Pen
    Flexbox CSS
    by rehmaanali (@geekstrick)
    on CodePen.

    flex direction properties

  • 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