Flexbox Column Layout — Vertical Stacking

Vertical Column Layout with Flexbox

A column layout stacks flex items vertically from top to bottom. This is achieved by setting flex-direction: column on the flex container.

CSS Code

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex: 0 0 auto;
}

.main {
  flex: 1;
}

.footer {
  flex: 0 0 auto;
}

How It Works

With flex-direction: column, the main axis becomes vertical. Children stack from top to bottom, and justify-content now controls vertical distribution while align-items controls horizontal alignment.

Setting min-height: 100vh on the container ensures the layout fills at least the full viewport height. The header and footer use flex: 0 0 auto to take only the space their content requires, while the main content area uses flex: 1 to expand and fill all remaining space.

Axis Swap Behavior

When switching from row to column, the meaning of alignment properties swaps:

Property	In Row	In Column
justify-content	Horizontal	Vertical
align-items	Vertical	Horizontal
flex-basis	Sets width	Sets height

When to Use Column Direction

Column layouts are essential for page-level structure (header/content/footer), sidebar navigation, form layouts, and any situation where you need vertical stacking with flexible sizing. The column direction also works well inside nested flex containers — for example, a row of cards where each card is itself a column flex container.