Understanding flex-direction in Flexbox
I face a lot of problems when centering things in CSS. So I finally decided to learn CSS Flexbox. I started with Wes Bos's course What The Flexbox. It's a great free course, check it out if you want to learn flexbox.
Introduction
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
The container or parent element is called "flex container" while the children are called "flex items". In Flexbox there are two axes - Main axis and Cross axis. The flex items will be aligned along these axes.
![Flexbox axes Flexbox axes](/static/da715013ca99814ab4913ca3bba067be/a6d36/flexbox-axes.png)
flex-direction
The default direction of the main-axis is from left to right while the direction of cross-axis is from top to bottom. However, this can be changed by Flexbox property flex-direction. To understand how flex-direction changes these axes we need to see some code example.
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
</div>
I have taken a container div (flex container) and there are 8 divs (flex items) inside it.
.container {
display: flex;
border: 10px solid #000000;
flex-direction: row;
}
For Flexbox to work we need to set the display property of container to flex. The default flex-direction is row and it would align the flex items as below:
![position of flex items for default flex-direction position of flex items for default flex-direction](/static/cd355ab1cf19cc0c674f50d653ff99a0/af590/flex-direction-row.png)
There are mainly four values for flex-direction - row, row-reverse, column and column-reverse.
flex-direction: row-reverse
changes the direction of main-axis from left to right.
![position of flex items for row-reverse flex-direction position of flex items for row-reverse flex-direction](/static/638a2e83f677390e90e6dd5a9481adac/af590/flex-direction-row-reverse.png)
flex-direction: column
changes the direction of main-axis from top to bottom.
![position of flex items for column flex-direction position of flex items for column flex-direction](/static/a36a0ada4f269dc8cf43d0913f3e328a/ef9e5/flex-direction-column.png)
flex-direction: column-reverse
changes the direction of main-axis from bottom to top.
![position of flex items for column-reverse flex-direction position of flex items for column-reverse flex-direction](/static/9329767449cac53ed6324d533a3b9592/d0d8c/flex-direction-column-reverse.png)
This is it for today's post. I will continue to share about Flexbox in my future posts.