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-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