Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 14, 2021 01:04 pm GMT

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:

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-contentwill now work vertically
  • align-itemswill 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

Author's Note:
This post is one of my TIL notes, mainly based on my learning on The Frontend Developer Career Path on Scrimba platform.


Original Link: https://dev.to/adiatiayu/css-flexbox-flex-direction-415g

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To