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.
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.
.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.
.flex-column { flex-direction: column; }
<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.
And Finally, we also have a column-reverse which stacks the items in the reverse order.
.flex-column-reverse { flex-direction: column-reverse; }
<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.
See the Pen Flexbox CSS by rehmaanali (@geekstrick) on CodePen.