52. Flex Container Property: flex-direction
The flex-direction property defines the main axis, thereby establishing the direction in which flex items are placed in the container.
Available Values
| Value | Direction | Start/End Points |
|---|---|---|
row (default) | Left to right (horizontal) | Start = Left, End = Right |
row-reverse | Right to left (horizontal) | Start = Right, End = Left |
column | Top to bottom (vertical) | Start = Top, End = Bottom |
column-reverse | Bottom to top (vertical) | Start = Bottom, End = Top |
Examples
Horizontal Layout (Default)
css .container-row { display: flex; flex-direction: row; } /* Items 1, 2, 3 arranged horizontally */
Vertical Layout (Changing the Main Axis)
css .container-column { display: flex; flex-direction: column; height: 300px; } /* Items 1, 2, 3 arranged vertically */
Tip: When you change the flex-direction to column, the Main Axis becomes vertical and the Cross Axis becomes horizontal. This means properties that control the main axis (like justify-content) will now control vertical alignment, and cross-axis properties (like align-items) will control horizontal alignment.