Flex Direction

Define the main axis direction.

The flexDirection property establishes the main axis, causing items to lay out either horizontally (rows) or vertically (columns). The horizontal directions below assume Direction.Ltr, the default. With Direction.Rtl, Row flows right to left and RowReverse flows left to right. See Writing Direction.

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