Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
Flexbox has a main and cross axis. The main axis is defined by the flex-direction property, which has four possible values:
-
row (default): horizontal axis with flex items from left to right
-
row-reverse: horizontal axis with flex items from right to left
-
column: vertical axis with flex items from top to bottom
-
column-reverse: vertical axis with flex items from bottom to top