Purpose of Flex-Direction

1

image
https://css-tricks.com/wp-content/uploads/2018/10/flex-direction.svg

Hi, I understand flex-direction changes the order of the flex items in their flex container. But why do we need to change the order when we could actually put their order in a correct position at first, eg, red is at the left and blue is at the right?

Thank you :slight_smile:

2

Hi there and welcome! :slight_smile:

Changing flex-direction value - you make a one-line change. Changing the order of the items manually - you do more changes in the code which is more likely to lead to an error or bug.

Cheers.

1 Like
3

A common use case is when building user interfaces that look different on a mobile device vs a desktop device. e.g. on Mobile you may want the layout to be a column, however on a big desktop screen you might want it to be in a row.

1 Like
4

flex-direction is mainly used for switching between row and column, the use of reverse is much less common. Both semantically and accessibility wise, it really isn’t ideal to change element order using CSS.

5

Hi,
Which device do flex-direction tend to help in building user interface?

6

Noted. I am curious, if I want to change the order of element, is there other way to do it ?(not CSS, since it is not ideal.)

7

  1. There are plenty of layouts that start with a horizontal row layout and when the screen gets too narrow switches to a vertical column layout. Flexbox is great for that type of layout switch. It also has nice element wrapping support where the elements will wrap to a new line (or column) as needed.

  2. Not really sure what you are asking for but you can do DOM manipulation where you change the content of the page using JavaScript.

1 Like