flex-direction

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