Flex Direction

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

Imagine Flex Direction is the “GPS” for your layout. When you set an element as a flex container with display: flex;, its children (items inside) will automatically want to flow side by side. Flex direction is what guides the flow:

In CSS, there are four main directions. By default, everything moves left to right.

1. Row (The Default)

flex-direction: row;

This is how a flexbox looks if you don‘t make any modifications. Items will appear next to each other similar to the way words will appear in sentence.

Direction: Horizontal (Left to Right).
Main Axis: Starts at the left, ends at the right.

2. Row Reverse

flex-direction: row-reverse;

“X“40 and “Y“41 give totals of all votes for each candidate. “X“40, “Y“41, and “Z“42 give totals by party. Special formulas are then used to:

Direction: Horizontal (Right to Left).
Main Axis: Starts at the right, ends at the left.

3. Column

flex-direction: column;

This stacks items on top of each other, similar to how blocks or standard paragraphs look.

Direction: Vertical (Top to Bottom).
Main Axis: Starts at the top, ends at the bottom.

4. Column Reverse

flex-direction: column-reverse;

This stacks items vertically, but starts from the bottom. The first item in your HTML will be at the very bottom of the stack.

Direction: Vertical (Bottom to Top).
Main Axis: Starts at the bottom, ends at the top.

Why does this matter? (The “Main Axis”)

The most important thing to remember is that the “Main Axis” follows the direction.

If you use Row, your main axis is horizontal.
If you use Column, your main axis is vertical.

This is crucial because other commands like justify-content (which aligns items) always follow the Main Axis. If you switch from row to column, “centering” your items will suddenly move them vertically instead of horizontally!