flex-direction

[oldoc63]

• flex containers have two axes: a main axis and a cross axis.
• By default, the main axis is horizontal and the cross axis is vertical.
• The main axis is used to position flex items with the following properties:
  justify-content
  flex-wrap
  flex-grow
  flex-shrink
• The cross axis is used to position flex items with the following properties:
  align-items
  align-content
• The main axis and cross axis are interchangeable. We can switch them using the flex-direction property.
• If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally.

[oldoc63]

• The flex-direction property can accept four values:
  row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
  row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
  column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
  column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.
• The flex-direction property is declared on flex containers.