Why would we use flex-direction: row-reverse/column-reverse;?

Question

Why would we use flex-direction: row-reverse/column-reverse;?

Answer

The use of flex-direction: row-reverse/column-reverse; will mostly be decided by design/layout specifications for our site, however, a couple great use cases:

  • altering the order of flex items with CSS instead of JavaScript, for example: clicking a sort button could switch order of elements from ascending to descending
  • altering the order of flex items for CSS animations/transitions/effects
12 Likes

Great answer, thanks for the use cases.

6 Likes

what is the effect of min-height and max-height over height in flexbox ??

1 Like

When setting the height of a flex container, it will have a fixed height no matter what - nothing can change its height. However, if we replace height with max-height, we are now simply telling the flex container that it can’t have a height over a certain value, but it can have a height below the certain value. Of course, there’s no reason for it to have this max height so it will shrink down to its minimum height which is computed by its content

4 Likes