Learn the Front-end Beta Search

flex-direction

Definition

The flex-direction CSS property is used in flexbox layouts to determine the direction in which flex items are laid out within a flex container. It defines whether the items are displayed in a row or a column, as well as the order in which they appear. The property accepts values like row, row-reverse, column, and column-reverse.

For example, flex-direction: row; will display flex items horizontally in a row, while flex-direction: column; will stack them vertically in a column. The flex-direction property is essential for controlling the flow and arrangement of flex items within a flex container.

Syntax

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

Values

  • row (default), row-reverse, column, column-reverse.

Practical Examples

.features {
  display: flex;
  flex-direction: column;
  gap: 1rem;

Switch direction to stack items vertically or reverse their order.

HTML
Column 1
Column 2
Column 3
Row
Row
Code
<div class="flex gap-4">
  <div class="flex h-32 w-40 flex-col gap-2 rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="display:flex; flex-direction: column; gap:0.5rem;">
    <div class="rounded-lg bg-slate-100 p-2 text-sm text-slate-700">Column 1</div>
    <div class="rounded-lg bg-slate-100 p-2 text-sm text-slate-700">Column 2</div>
    <div class="rounded-lg bg-slate-100 p-2 text-sm text-slate-700">Column 3</div>
  </div>
  <div class="flex h-32 w-40 flex-row gap-2 rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="display:flex; flex-direction: row; gap:0.5rem;">
    <div class="flex-1 rounded-lg bg-slate-100 p-2 text-sm text-slate-700">Row</div>
    <div class="flex-1 rounded-lg bg-slate-100 p-2 text-sm text-slate-700">Row</div>
  </div>
</div>

Tips & Best Practices

  • Combine with responsive utilities or media queries to switch layout direction.
  • Remember that the main axis changes—alignment properties adjust accordingly.

Accessibility & UX Notes

Column layouts often improve reading flow on mobile devices.

Browser Support

Supported in all modern browsers.

  • flex-wrap to control wrapping behavior.
  • gap for spacing.
  • order to tweak item sequence.

Related posts