A practical guide to Flexbox

Flexbox is the tool for laying things out in one direction — a row or a column. Once a few core ideas click, most everyday layout problems become two or three lines of CSS. Here’s the mental model and the patterns worth memorising.

The one idea that makes flexbox click — two axes

When you set display: flex, the container lays its children along a main axis, with a perpendicular cross axis:

• flex-direction: row (default) → main axis is horizontal, cross axis vertical.
• flex-direction: column → main axis is vertical, cross axis horizontal.

Every alignment property is defined relative to those axes, not to left/right/top/bottom. That’s the whole trick:

• justify-content aligns along the main axis.
• align-items aligns along the cross axis.

.center {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}

That snippet centers a child both ways — in a row it’s horizontal + vertical; flip to column and the two simply swap meaning.

Distributing space with justify-content

On the main axis, justify-content controls the gaps:

• flex-start / flex-end / center — pack items together.
• space-between — first and last hug the edges, equal space between.
• space-around / space-evenly — distribute space including the ends.

A classic nav bar — brand on the left, links on the right — is just:

.navbar { display: flex; justify-content: space-between; align-items: center; }

Sizing items: the flex shorthand

flex is shorthand for grow, shrink and basis:

flex: <grow> <shrink> <basis>;   /* e.g. flex: 1 1 0  ==  flex: 1 */

• grow — how much an item expands to fill leftover space (0 = don’t).
• shrink — how much it gives up when space is tight (0 = never shrink).
• basis — the starting size before grow/shrink.

The two you’ll use most:

• flex: 1 → “share the free space equally” (great for equal columns).
• flex: 0 0 auto → “stay exactly my content size” (great for buttons, icons).

The media object snippet shows both together: a fixed figure (flex: 0 0 56px) beside a flexible body (flex: 1).

The gap you should know about: min-width: auto

Flex items default to min-width: auto, meaning they refuse to shrink below their content — long text or a <pre> then overflows its container. The fix is one line:

.flex-item { min-width: 0; }

This single rule resolves the majority of “why is my flexbox overflowing?” questions.

Spacing and wrapping

Use gap for spacing between items — it’s cleaner than margins and doesn’t add space at the ends:

.row { display: flex; gap: 16px; }

Allow items to flow onto multiple lines with flex-wrap: wrap. When you mostly want a responsive grid of cards, though, CSS Grid is often the better fit — see the responsive grid with no media queries snippet.

Two patterns worth copying

• Sticky footer — a column layout where the main area uses flex: 1 to push the footer to the bottom.
• Media object — fixed figure + flexible text, the backbone of comments, list rows and cards.

When to reach for Grid instead

Flexbox is one-dimensional — content-driven rows or columns. When you need rows and columns to line up together (a true two-dimensional layout), that’s CSS Grid’s job. A grid guide is coming next.

Need to convert design sizes while you build? The CSS unit converter and aspect ratio calculator are a click away. Browse all snippets or subscribe via RSS.