Flexbox: The Complete Guide

Flexbox is CSS layout for one dimension at a time — a row or a column. It solves alignment, spacing and equal-height problems that used to require hacks. This chapter is the complete reference: container properties, item properties, and the recipes you will reuse daily.

Two axes

A flex container has a main axis (the direction items flow) and a cross axis (perpendicular to it). justify-content distributes along the main axis; align-items works on the cross axis. Get the axes straight and every property makes sense.

Container properties

.toolbar {
  display: flex;
  flex-direction: row;        /* row (default) | column | row-reverse | column-reverse */
  flex-wrap: wrap;            /* allow items to flow to new lines */
  justify-content: space-between; /* main-axis distribution */
  align-items: center;        /* cross-axis alignment */
  gap: 1rem;                  /* space between items (no collapsing!) */
}

justify-content values

Item properties

.toolbar .spacer { flex: 1; }             /* grow to fill remaining space */
.toolbar .btn    { flex: 0 0 auto; }      /* natural size, never shrink */
.grow            { flex: 1 1 0%; }        /* equal-width, share all space */

The three-value shorthand flex: grow shrink basis:

• grow — share of leftover space (0 = ignore it).
• shrink — how eagerly to shrink when space is scarce (1 = normal).
• basis — starting size before free space is distributed (0% = ignore content size; auto = content size).

Handy values: flex: 1 = grow 1, shrink 1, basis 0% · flex: auto = 1 1 auto · flex: none = 0 0 auto.

Recipe 1: perfect vertical + horizontal centering

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

Expected output: the hero content is dead-centre — no margins, no transforms, no hacks.

Recipe 2: navbar with a centred middle item

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
}
.brand { font-weight: 700; }
.nav-links { display: flex; gap: 1.25rem; list-style: none; }
.nav-actions { margin-inline-start: auto; } /* pushes itself right */

Expected output: logo left, actions right — and with three groups, space-between keeps everything balanced. margin-inline-start: auto is the classic "push to the end" trick inside flex.

Recipe 3: equal-height cards

.cards {
  display: flex;
  flex-wrap: wrap;            /* cards wrap on small screens */
  gap: 1.25rem;
}
.card {
  flex: 1 1 260px;            /* at least 260px, grow to share space */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card .footer { margin-top: auto; }  /* pin button to bottom */

Expected output: cards share each row's width equally (never below 260 px), all the same height, with the button glued to the bottom even when content lengths differ.

Recipe 4: sticky footer page shell

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }             /* content pushes footer down */
footer { padding: 2rem; }

Expected output: the footer always sits at the bottom of the viewport even when the page has little content.

align-self: overriding one item

.row { display: flex; align-items: flex-start; }
.row .tall-note { align-self: flex-end; }   /* this one hangs at the bottom */

Flexbox property cheat sheet

Common mistakes

• Fixed widths on flex children — they fight flex: 1; prefer min-width + flex.
• Ignoring overflow — long text in flex-shrink: 0 items forces page overflow; give items min-width: 0 when their content must wrap.
• Using reverse directions — row-reverse breaks keyboard/reading order; reorder the HTML instead.
• Flexbox for two-dimensional layout — if you align rows and columns, reach for Grid (next chapters).

Practice checklist

1. Build the navbar recipe with logo, links and actions.
2. Make a card row where every card is equal height and the CTA pins to the bottom.
3. Create a full-height page shell with a sticky footer.

When you need rows and columns together, upgrade to — CSS Grid Essentials.