Flex Direction

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.

Row Revers

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

And Markup Will be

  <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:

as you can see the items are placed in reverse order.

Column

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

And Markup Will be

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

After this what we will get to display is:

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.

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

And Markup Will be

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

After this what we will get to display is:

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.