CSS flex-direction: Row, Column and Reverse

flex-direction chooses the main axis, in other words the direction items flow.

Value	Items flow
`row`	Left to right (the default)
`row-reverse`	Right to left
`column`	Top to bottom
`column-reverse`	Bottom to top

index.html

HTML

<style>
  .container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
  .box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
  .container { display: flex; margin-bottom: 10px; gap: 6px; }
  .r  { flex-direction: row; }
  .rr { flex-direction: row-reverse; }
  .c  { flex-direction: column; }
</style>
<div class="container r"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<div class="container rr"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<div class="container c"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>

The axes swap with the direction

With flex-direction: column, the main axis becomes vertical. That means justify-content now spaces items vertically, and align-items works horizontally. This catches many people out. When alignment seems “backwards”, check the direction.

A very common pattern: switch on small screens

A row of cards on desktop becomes a stack on phones:

style.css

CSS

.cards { display: flex; flex-direction: column; }

@media (min-width: 768px) {
  .cards { flex-direction: row; }
}

dangerous

Reverse is only visual

row-reverse and column-reverse change how things look, not the order in the HTML. Keyboard focus and screen readers still follow the HTML order, which can be confusing. Reorder the HTML itself when the sequence matters.