flex-direction
The direction of the main axis of a flex container: items in a row or in a column.
Syntax
flex-direction: value;Values
| Parameter | Type | Description |
|---|---|---|
| row | keyword | In a row, in the text direction (the default). |
| column | keyword | In a column, top to bottom. |
| row-reverse | column-reverse | keyword | The same, in reverse order. |
Examples
A row, a column and a reversed row:
<style>
.box { display: flex; gap: 6px; margin-bottom: 8px; }
.box div { padding: 6px 12px; background: gold; }
</style>
<div class="box"><div>1</div><div>2</div><div>3</div></div>
<div class="box" style="flex-direction: column;"><div>1</div><div>2</div><div>3</div></div>
<div class="box" style="flex-direction: row-reverse;"><div>1</div><div>2</div><div>3</div></div>Notes
With column, justify-content works vertically and align-items horizontally — they always follow the main axis. The reverse values change only the visual order: keyboard focus still follows the markup.
See also
- flex-wrap — Whether flex items may wrap onto new lines.
- justify-content — Distributes items along the main axis of a flex or grid container.
- align-items — Aligns items across the main axis — vertically in a row.
Related recipes
In the tutorial
- Flexbox — Laying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.