Flex Direction

Define the main axis direction.

The flexDirection property establishes the main-axis, causing items to layout either horizontally (rows) or vertically (columns).

Values

Visual Guide

Row:
[Item 1] -> [Item 2] -> [Item 3]

Column:
[Item 1]
   |
   v
[Item 2]
   |
   v
[Item 3]

Row

Default behavior. Items are placed from left to right.

RowReverse

Items are placed from right to left.

Column

Items are placed from top to bottom.

ColumnReverse

Items are placed from bottom to top.

Next Steps

• Flex Wrap
• Justify Content