CSS Flexbox: flex-direction

CSS Flexbox: flex-direction

Ayu Adiati's photo
Ayu Adiati
ยทJan 14, 2021ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Hello Fellow Codenewbies ๐Ÿ‘‹

Flexbox is known as one dimension.
It means that it deals with one dimension layout at a time, the column or the row.

When we talk about a column or a row in flexbox, we are talking about the main axis or the cross axis.

cross main axis.jpg

Making Responsive Layout With flex-direction

Before we talk about the values of flex-direction, you can check the playground that I provide below.
The screenshots that I attached in each value's explanation are based on this playground.

The values in flex-direction:

row

โญ This the default value.
This value makes the flex container becoming a row and the flex items become columns. row1.jpg

row-reverse

Same as row, but it reverses the order of the flex items. row-reverse-1.jpg

column

This value makes flex container becomes column and flex items become rows.

In a glimpse, it looks like the default layout when we don't apply display: flex.
But under the hood, this value switches the main axis.
And because there is a change on the main axis, there are changes as well in the behavior of:

  • justify-content
    This now will work vertically
  • align-items
    This now will work horizontally column1.jpg

column-reverse

Same as column, but it reverses the order of the flex items. column-reverse-1.jpg

We usually use media queries when we want to apply flex-direction.

Conclusion

  • flex-direction is changing the main axis around.
  • The values of flex-direction:
    • row (default)
    • row-reverse
    • column
    • column-reverse

Did you find this article valuable?

Support Ayu Adiati by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this