Flex Direction

The flex-direction property controls the main axis direction of flex items.

Row (Default)

Items flow left to right:

Row Reverse

Items flow right to left:

Column

Items flow top to bottom:

Column Reverse

Items flow bottom to top:

Interactive Direction

Practical: Vertical Navigation

Responsive Direction

Change direction based on screen size:

Main vs Cross Axis

Direction determines the axes:

Exercise: Create Vertical Stack

Change the layout to a vertical column: