CSS Flexbox Guide: Layout Without the Guesswork (2026)

Quick answer: CSS flexbox lays out items along one axis — a row or a column. Set display: flex on the container, use justify-content for the main axis and align-items for the cross axis, and gap for spacing. It is the right tool for navigation bars, button rows, card contents and any “line them up” problem. Reach for Grid once you need rows and columns together.The sections below cover CSS flexbox in the order you need it: the container properties, the shorthand that trips people up, three layouts worth memorising, then wrapping — the CSS flexbox behaviour that surprises most people.

The container does the work

Flexbox is controlled from the parent. Three properties answer most layout questions:

.toolbar {
  display: flex;
  justify-content: space-between;  /* main axis: spread items apart */
  align-items: center;             /* cross axis: centre vertically */
  gap: 0.75rem;
}

The one mental shift: justify-content always works along whatever direction you chose. Switch to flex-direction: column and the two properties swap their visual effect — justify-content now centres vertically.

The three-item flex shorthand

How an individual item grows and shrinks is set with the flex shorthand: grow factor, shrink factor and base size.

.row { display: flex; gap: 1rem; }

.sidebar { flex: 0 0 240px; }   /* fixed: never grow or shrink */
.content { flex: 1 1 auto; }    /* fill the rest */
.label   { flex: none; }        /* size to content */

• flex: 1 — grow to fill the free space, shrink if needed. The most common value.
• flex: none — keep the natural size.
• flex: 0 0 240px — a fixed 240px that cannot grow or shrink.

Three CSS flexbox layouts worth memorising

Centre anything — the classic problem, solved in three lines:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
}

Sticky footer — a column where the middle grows so the footer sits at the bottom on short pages:

body { display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1; }

Media object — an avatar and text side by side, with the text taking the remaining width:

.media { display: flex; gap: 1rem; align-items: flex-start; }
.media img { flex: none; border-radius: 50%; }
.media .body { flex: 1; min-width: 0; }  /* min-width stops long words overflowing */

That min-width: 0 is a detail worth remembering. Flex items default to a minimum size based on their content, so a long unbreakable string can refuse to shrink and overflow the row. Setting it to zero lets the item shrink and the text wrap normally.

Wrapping cards with CSS flexbox

Flexbox can also build a responsive card row without media queries, by allowing wrap and giving each card a sensible basis.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cards > * {
  flex: 1 1 260px;   /* grow, shrink, wrap once narrower than 260px */
}

Each card tries to be at least 260px, grows to share the row, and wraps to the next line when the space runs out. When you need the cards to align strictly into equal columns and rows, that is the point to switch to CSS Grid.

Next: CSS Grid. To learn layout with a mentor on real designs, Ampersand Academy teaches web development one-to-one.

Frequently asked questions