# CSS Flexbox: flex-direction

Hello Fellow Codenewbies 👋

Flexbox is known as *one dimension*.
<br>
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1609719149841/3rx8PuitL.jpeg)


# Making Responsive Layout With `flex-direction`

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

%[https://codepen.io/adiati/pen/ZEpBeBd?editors=1100]

## The values in `flex-direction`:
### row
  ⭐ This the default value.
<br>
  This value makes the flex container becoming a row and the flex items become columns.
![row1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1610412594152/-1iup83xp.jpeg)


### row-reverse
  Same as `row`, but it reverses the order of the flex items.
![row-reverse-1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1610412605130/AOPK3dhIy.jpeg)

### 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`.
<br>
 But under the hood, this value ***switches the main axis***.
<br>
  And because there is a change on the main axis, there are changes as well in the behavior of:
  - `justify-content`
    <br>
    This now will work *vertically*
  - `align-items`
<br>
    This now will work *horizontally*
![column1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1610412527410/Qnrf-32Tv.jpeg)

### column-reverse
  Same as `column`, but it reverses the order of the flex items.
![column-reverse-1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1610412625974/NnCaMYZe1.jpeg)

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