DEV Community

Cover image for CSS Flexbox: flex-direction
Ayu Adiati
Ayu Adiati

Posted on • Updated on • Originally published at

CSS Flexbox: flex-direction

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:


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


Same as row, but it reverses the order of the flex items.


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



Same as column, but it reverses the order of the flex items.

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


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

Top comments (0)