Home >CSS >CSS reference – properties, selectors, functions >flex-direction

flex-direction

flex-direction: row | row-reverse | column | column-reverse

Sets the main axis of a flex container – whether the items are laid out next to each other or below each other, and from which end. justify-content, flex-grow and others then follow the main axis; align-items works on the perpendicular (cross) axis.

Values

row – the default: next to each other in the direction of the text (left to right in English).
row-reverse – next to each other in reverse order, aligned to the right edge.
column – below each other from top to bottom.
column-reverse – below each other from bottom to top.

Initial value: row. Inherited: no. Applies to: flex containers.

Examples

The same three items with row, row-reverse and column:

<div class="flex">
  <div>1</div><div>2</div><div>3</div>
</div>
<div class="flex reversed">
  <div>1</div><div>2</div><div>3</div>
</div>
<div class="flex column">
  <div>1</div><div>2</div><div>3</div>
</div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex { margin-bottom: 8px; gap: 6px; }
.reversed { flex-direction: row-reverse; }
.column { flex-direction: column; }

result

A layout that switches from a row to a column on a narrow screen:

.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 700px) {
  .cards { flex-direction: row; }
}

Things to watch out for

row-reverse and column-reverse change only the order on the screen. The Tab key and screen readers still follow the order of the HTML – with links and buttons that is confusing. When the order should be different, change the HTML instead.
With column the roles swap: justify-content aligns vertically and align-items horizontally.
In a column the items fill the full width by default (align-items: stretch); they become as narrow as their content with align-items: flex-start.

Browser support

Baseline – widely available: in all major browsers since September 2015, considered widely available since March 2018. Since version: Chrome 29, Firefox 22, Safari 9. As of October 2026 (MDN browser-compat-data).