flex-direction

flex-direction chooses the main axis and its direction in a flex container. Row follows the inline axis; column follows the block axis. They are not permanently synonyms for horizontal and vertical in every writing mode.

Compare row and column

In this horizontal, left-to-right document, row puts items beside one another and column stacks them. Both retain the same source order.

<div class="demo row"><span>1</span><span>2</span><span>3</span></div>
<div class="demo column"><span>1</span><span>2</span><span>3</span></div>

.demo {
  display: flex;
  gap: 0.5rem;
  margin-block: 1rem;
}
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
.demo span {
  background: #dbeafe;
  padding: 0.5rem;
}

Adapt a compact action group

The group stacks by default and becomes a row when the example document is at least 480px wide. The buttons remain in their logical order.

<div class="actions">
  <button type="button" onclick="this.textContent='Draft saved'">
    Save draft</button
  ><button
    type="button"
    onclick="this.textContent='Preview opened in this example'"
  >
    Preview
  </button>
</div>

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
button {
  padding: 0.75rem;
}
@media (min-width: 480px) {
  .actions {
    flex-direction: row;
  }
}

Values and alignment

The initial value is row and the property is not inherited. Row-reverse and column-reverse reverse the visual main direction. The rule applies only to flex containers established by display:flex or inline-flex.

Changing direction also changes which axis justify-content and align-items operate on. The text direction and writing mode determine where start and end lie.

Reading and focus order

Reversing visual flow does not generally reverse screen-reader reading or keyboard focus order. Use a sensible DOM order and avoid reversing essential sequences. In the editor, try row-reverse on numbered noninteractive items, then compare it with the source. Use flex-flow when setting direction and wrapping together.

Sources and browser support

MDN: flex-direction describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.