flex-direction

Last Updated: March 22, 2022

This defines the main axis and how the items are laid on the main axis. In other words, this defines which direction you can keep the flex items.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
flex direction3

flex-direction :row stacks the items horizontally

flex-direction :row-reverse stacks the items horizontally in reverse order

flex-direction :column stacks the items vertically from top to bottom

flex-direction :column-reverse stack the items vertically in reverse order from bottom to top

InĀ rtl, all these are working in the opposite way

The default value of the flex-direction is row

Test