CSS Flexbox solves one-dimensional layout — rows or columns — and most of the layout bugs developers hit come from applying it to problems that are actually two-dimensional.
CSS Flexbox is a layout mode where a container distributes space among its children along a single axis, either horizontally or vertically, and lets you control alignment, ordering, and wrapping without floats or manual positioning. It's the tool behind nearly every navbar, button group, and card layout on the modern web — but understanding the axis model is what separates "I got it to work" from "I know why it worked."
Why Flexbox Matters (and When to Skip It)
Before flexbox, centering something vertically required table hacks or absolute positioning with negative margins. Flexbox turned that into display: flex; align-items: center;. It's the right tool whenever you're laying out items in a single row or column — navbars, toolbars, form rows, card content.
Skip it for genuinely two-dimensional layouts — a photo gallery grid, a dashboard with rows and columns that need to align across both axes. That's what CSS Grid is for, and reaching for flexbox there usually means fighting flex-wrap to fake a grid.
Getting Started with Flexbox
The two properties that matter most: flex-direction sets the axis, and justify-content/align-items control alignment along and across that axis.
.toolbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
}
justify-content aligns along the main axis (horizontal, for row). align-items aligns along the cross axis (vertical, for row). Swap flex-direction to column and those two properties swap which axis they control — this is the single most common source of flexbox confusion.
Core Flexbox Concepts Every Developer Should Know
flex-grow, flex-shrink, and flex-basis control how children resize relative to each other. The shorthand flex: 1 means "grow to fill available space equally":
.sidebar { flex: 0 0 240px; } /* fixed width, never grows or shrinks */
.main { flex: 1; } /* fills remaining space */
gap replaced margin hacks for spacing between flex children. No more :not(:last-child) { margin-right: 12px } — just gap: 12px on the container.
flex-wrap turns a single row into multiple rows when children overflow:
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
Order can be changed visually without touching HTML, using the order property — useful for responsive layouts where mobile needs a different visual order than desktop, without duplicating markup.
Common Flexbox Mistakes and How to Fix Them
Mistake 1: forgetting min-width: 0 on flex children that need to truncate text. A flex child with overflow: hidden; text-overflow: ellipsis; won't actually truncate unless it can shrink below its content size, which flexbox blocks by default. Fix: add min-width: 0 (or min-height: 0 for column layouts) to the child.
.flex-child {
min-width: 0; /* allows text-overflow: ellipsis to actually work */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Mistake 2: using flexbox for a full page grid layout. Fighting flex-wrap and manual widths to fake a 3-column grid produces uneven rows the moment content heights differ. Fix: use CSS Grid — it's built for exactly this.
Mistake 3: mixing up justify-content and align-items. This is almost universal early on — remembering that justify-content always follows flex-direction's axis, and align-items is always perpendicular to it, removes the guesswork.
When Should You Use Flexbox Instead of Grid?
Use flexbox for one-dimensional layouts where content size should drive the layout — a row of buttons, a nav bar, a list of tags that wrap naturally. Use Grid the moment you need alignment across both rows and columns simultaneously, like a dashboard or photo gallery.
Flexbox in Production
Combine flexbox with gap instead of margins for spacing — it's more predictable and doesn't require :last-child exceptions. For responsive nav bars, flex-wrap: wrap combined with a media query that switches flex-direction from row to column on small screens covers most real mobile layouts without extra markup.
Next layout bug you hit with flexbox, check min-width: 0 first — it silently fixes more truncation and overflow issues than any other single line of CSS.