Flexbox landed in all major browsers around 2015 and immediately solved the problem developers had been hacking around for a decade: vertical centering. But most people learned it backwards — they memorised justify-content: center from a cheat sheet without understanding why it works. When the layout doesn't behave, that gap in understanding turns a five-minute task into an hour of trial and error. This guide builds the mental model first, then covers every property that actually matters in real projects.
The Mental Model: One Axis at a Time
The core concept of Flexbox is that it lays items out along a single axis. There's a main axis — the direction items flow — and a cross axis, which runs perpendicular. The critical insight almost every beginner misses: flex-direction determines which axis is which. Everything else follows from that.
/* Default: main axis runs LEFT → RIGHT, cross axis runs TOP → BOTTOM */
.container {
display: flex;
flex-direction: row; /* default */
}
/* Rotated: main axis now runs TOP → BOTTOM, cross axis runs LEFT → RIGHT */
.container {
display: flex;
flex-direction: column;
}
/*
justify-content → controls alignment on the MAIN axis
align-items → controls alignment on the CROSS axis
This is why centering something in both axes looks like this:
*/
.center-both {
display: flex;
justify-content: center; /* horizontally centred (main axis = row) */
align-items: center; /* vertically centred (cross axis) */
}flex-direction: column, justify-content no longer controls horizontal alignment — it controls vertical alignment, because the main axis has rotated. align-items now controls the horizontal. Keep this rotation in mind whenever something isn't aligning where you expect it.Container Properties
These properties go on the flex container — the parent element with display: flex. They control how all child items are distributed and aligned.
/* display: flex makes the element a block-level flex container.
display: inline-flex makes it inline (sits in text flow). */
.nav {
display: flex;
}
/* flex-direction — which way does the main axis run? */
.nav {
flex-direction: row; /* left to right (default) */
flex-direction: row-reverse; /* right to left */
flex-direction: column; /* top to bottom */
flex-direction: column-reverse; /* bottom to top */
}
/* flex-wrap — what happens when items overflow the container? */
.card-grid {
flex-wrap: nowrap; /* all items forced onto one line (default) */
flex-wrap: wrap; /* items wrap onto additional lines */
flex-wrap: wrap-reverse; /* items wrap in reverse order */
}
/* gap — space between items. Modern approach; avoids margin hacks. */
.card-grid {
gap: 1.5rem; /* same in both directions */
gap: 1rem 2rem; /* row-gap column-gap */
}The gap property deserves a special mention. Before it existed, the common pattern was to add margins to flex items and then cancel the outer edges with negative margins. gap replaces all of that cleanly — use it everywhere instead.
/* justify-content — alignment on the MAIN axis */
.nav {
justify-content: flex-start; /* packed to start (default) */
justify-content: flex-end; /* packed to end */
justify-content: center; /* packed to centre */
justify-content: space-between; /* first/last at edges, equal gaps between */
justify-content: space-around; /* equal space around each item */
justify-content: space-evenly; /* equal space between every gap */
}
/* align-items — alignment on the CROSS axis (single line) */
.nav {
align-items: stretch; /* items fill cross-axis height (default) */
align-items: flex-start;/* items align to start of cross axis */
align-items: flex-end; /* items align to end of cross axis */
align-items: center; /* items centred on cross axis */
align-items: baseline; /* items aligned by their text baseline */
}
/* align-content — cross-axis alignment when there are MULTIPLE lines
(only takes effect with flex-wrap: wrap and enough items to wrap) */
.card-grid {
flex-wrap: wrap;
align-content: flex-start; /* rows packed to top */
align-content: center; /* rows centred vertically */
align-content: space-between; /* rows spread out with space between */
}Here's a real nav bar combining these. The logo sits on the left, and the navigation links are pushed to the right using margin-left: auto — a classic Flexbox trick. The justify-content: space-between approach also works, but the auto-margin technique is more flexible when you have more than two groups.
/* Nav: logo left, links right */
.site-nav {
display: flex;
align-items: center;
gap: 1rem;
padding: 0 2rem;
height: 64px;
background: #1a1a2e;
}
.site-nav .logo {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
text-decoration: none;
}
.site-nav .nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: auto; /* pushes everything after it to the right */
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
.site-nav .nav-links a {
color: #ccc;
text-decoration: none;
font-size: 0.9rem;
}
.site-nav .nav-links a:hover {
color: #fff;
}Item Properties
These properties go on the flex items — the direct children of the flex container. They control how individual items grow, shrink, and size themselves.
flex-grow— how much of the available free space this item claims. Default0(don't grow). Set to1on an item and it takes all remaining space.flex-shrink— how much this item shrinks relative to others when there's not enough space. Default1. Set to0to prevent an item from shrinking.flex-basis— the initial size of the item before any growing or shrinking. Can be a length (250px,30%) orauto(use the item's content size).align-self— overridesalign-itemsfor one specific item. Accepts the same values:auto,flex-start,flex-end,center,baseline,stretch.order— changes visual order without touching the HTML. Default0. Lower values appear first. Use sparingly — it breaks tab order and causes accessibility problems for keyboard and screen reader users.
/* Classic sidebar + main content layout */
.app-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 0 0 280px; /* don't grow, don't shrink, always 280px wide */
background: #f5f5f5;
padding: 2rem 1.5rem;
}
.main-content {
flex: 1; /* grow to fill all remaining space */
padding: 2rem;
min-width: 0; /* critical: prevents content overflow in flex children */
}
/* Responsive: stack vertically on mobile */
@media (max-width: 768px) {
.app-layout {
flex-direction: column;
}
.sidebar {
flex: none; /* reset — don't use flex-basis on column layout */
}
}min-width: 0 gotcha: By default, flex items cannot shrink below their minimum content size. If you have a long word or a wide table inside a flex item, it will overflow instead of wrapping. Adding min-width: 0 to the flex item fixes this. It comes up constantly with the main content area in sidebar layouts.The flex Shorthand Explained
The flex shorthand packs flex-grow, flex-shrink, and flex-basis into one declaration. The W3C spec defines a handful of keyword values that cover the common cases, and they're frequently confused with each other.
/* flex: 1
Expands to: flex-grow: 1; flex-shrink: 1; flex-basis: 0%
Meaning: grow and shrink freely; start from zero (ignore content size).
All items with flex: 1 share space equally, regardless of content.
Most common choice for "fill available space". */
.tab { flex: 1; }
/* flex: auto
Expands to: flex-grow: 1; flex-shrink: 1; flex-basis: auto
Meaning: grow and shrink freely; start from the item's content size.
Items with more content get more space — proportional, not equal. */
.column { flex: auto; }
/* flex: none
Expands to: flex-grow: 0; flex-shrink: 0; flex-basis: auto
Meaning: completely rigid — don't grow, don't shrink, stay at content size.
Use for items that should never flex (icons, avatars, fixed labels). */
.avatar { flex: none; }
/* flex: 0 0 200px
Explicit: don't grow, don't shrink, always exactly 200px.
Same as writing out all three values. More readable for fixed-size items. */
.sidebar { flex: 0 0 200px; }
/* Practical difference: flex: 1 vs flex: auto in a tab bar
With flex: 1 → all tabs are equal width regardless of label length
With flex: auto → "Settings" tab is wider than "Home" tab */
.tabs { display: flex; }
.tab-equal { flex: 1; } /* equal width tabs */
.tab-auto { flex: auto; } /* content-sized tabs */Common Real Layouts
Here are four patterns you'll reach for regularly — built with nothing but Flexbox.
/* 1. Sticky footer
The footer always sits at the bottom, even on short pages.
body (or .app-shell) becomes a column flex container. */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex: 1; /* expands to push footer down */
}
footer {
/* stays at the bottom */
}/* 2. Centred modal / hero content
Both axes centred — the Flexbox vertical-centring party trick. */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
}
.hero-content {
max-width: 640px;
text-align: center;
color: #fff;
}/* 3. Nav bar: logo left, links right */
.site-nav {
display: flex;
align-items: center;
padding: 0 2rem;
height: 64px;
}
.site-nav .nav-links {
margin-left: auto; /* auto margin consumes all free space to its left */
display: flex;
gap: 1.5rem;
list-style: none;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}/* 4. Card row that wraps on mobile */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card {
flex: 1 1 280px; /* grow and shrink, but never below 280px wide */
background: #fff;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* On wide screens: 3-4 cards per row.
On narrow screens: cards wrap into their own rows automatically.
No media query needed for the wrap itself — flex-wrap handles it. */Flexbox vs Grid — When to Use Which
This question comes up constantly, and the answer is simpler than most articles make it: Flexbox is for one-dimensional layouts. CSS Grid is for two-dimensional layouts. If you're laying items out in a single row or a single column — a nav bar, a button group, a card row — Flexbox is the right tool. If you need to control both rows and columns simultaneously — a full page layout, a photo mosaic, a form grid — reach for Grid instead.
In practice, you'll use both in the same project. Grid handles the page-level structure (header, sidebar, main, footer). Flexbox handles the components within those regions (the nav bar, the card content, the button cluster inside a modal). They complement each other rather than compete.
flex-wrap: wrap can do this, but items in the same visual row have no relationship to each other — their heights are independent. Grid's implicit row sizing handles this automatically. If you need the cards in a wrapped row to all be the same height AND have their internal elements align across cards, Grid is cleaner.Wrapping Up
The Flexbox mental model is: pick a direction, understand which properties control which axis, then choose whether items should grow, shrink, or stay fixed. Once that clicks, the cheat sheet becomes a lookup — not a crutch. The MDN Flexbox guide is the best reference for edge cases, and the CSS-Tricks complete guide remains the most useful visual cheat sheet around. For production use, browser support is essentially universal — no prefixes needed. The W3C specification is worth a skim if you ever hit a genuinely confusing edge case — the algorithm is documented precisely and answers most "why does this behave this way" questions.