flex-direction: row vs column

Four directions

.container { display: flex; flex-direction: row; }            /* default — left to right */
.container { display: flex; flex-direction: row-reverse; }    /* right to left */
.container { display: flex; flex-direction: column; }         /* top to bottom */
.container { display: flex; flex-direction: column-reverse; } /* bottom to top */

When column flex is the right answer

A vertical stack of items where you want flexbox alignment tools (gap, justify-content for top/bottom, align-items for left/right):

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

You can't use gap between block elements (it's a flex/grid property). flex-direction: column + gap is the cleanest way to spread vertical items evenly.

The axes flip

When you switch to flex-direction: column:

• Main axis becomes VERTICAL.
• Cross axis becomes HORIZONTAL.

justify-content now controls vertical placement. align-items now controls horizontal placement. Watch out — the same property names mean different visual directions depending on flex-direction.

row-reverse for RTL languages

row-reverse flips the order of items visually without changing the DOM. Useful for RTL languages (Arabic, Hebrew) or "newest first" feeds.