CodeNewbie Community

loading...
Cover image for CSS Flexbox: flex-direction

CSS Flexbox: flex-direction

Ayu Adiati
๐Ÿ‡ฎ๐Ÿ‡ฉ based in ๐Ÿ‡ณ๐Ÿ‡ฑ || Stay home mom ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ง || Love ๐Ÿ“ธ & ๐Ÿฃ & โ˜• || Self-taught ๐Ÿ‘ฉโ€๐Ÿ’ป || Full-stack developer in the making โš’
Originally published at adiati.com ใƒป2 min read

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 will now work vertically
  • align-items will now 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

Discussion (0)