Key takeaways
- Flexbox lays out items in one direction — a row or a column — and distributes space between them.
- Four properties do most of the work:
display: flex,justify-content,align-itemsandgap. - Use Flexbox for components (navbars, buttons, cards’ internals); use Grid for page-level two-dimensional layouts.
Before Flexbox, centring something vertically in CSS was a running joke. Now it takes three lines. Flexbox is the workhorse of modern interfaces — almost every header, button group and card on this site uses it. Here’s a practical tour with patterns you can copy.
The mental model: main axis and cross axis#
When you set display: flex on a container, its direct children become flex items arranged along the main axis (horizontal by default). The cross axis runs perpendicular to it.
| Property | Aligns along | Common values |
|---|---|---|
flex-direction |
Sets the main axis | row, column |
justify-content |
Main axis | flex-start, center, space-between, flex-end |
align-items |
Cross axis | stretch, center, flex-start, baseline |
gap |
Space between items | 8px, 1rem |
flex-wrap |
Allow multiple lines | nowrap, wrap |
Pattern 1: perfect centring#
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100dvh;
}Pattern 2: a site header#
.header {
display: flex;
align-items: center;
gap: 24px;
}
.header .nav { margin-inline: auto; } /* pushes nav to the middle */
.header .actions { display: flex; gap: 8px; }An auto margin on a flex item absorbs all spare space — a neat trick for pushing items apart.
Pattern 3: wrapping chips or tags#
.tags { display: flex; flex-wrap: wrap; gap: 8px; }Pattern 4: equal-height cards with the button at the bottom#
.card { display: flex; flex-direction: column; }
.card .body { flex: 1; } /* grows to fill */
.card .cta { margin-top: auto; } /* sticks to the bottom */Need a hand with this?
Get a quick, honest review of your website’s SEO.
Understanding flex: grow, shrink, basis#
The shorthand flex: 1 1 200px means: grow to share spare space (1), shrink if needed (1), starting from 200 px. Common shortcuts:
flex: 1— share space equally.flex: none— never grow or shrink (great for icons and avatars).flex: 0 0 82%— fixed-width slides in a horizontal scroller (this theme uses it for mobile card rails).
Common Flexbox gotchas#
- Text overflowing a flex item: flex items have
min-width: auto; addmin-width: 0to allow truncation. - Images stretching:
align-items: stretchis the default; setalign-items: centeror give imagesalign-self: start. - Using margins for gaps: use
gapinstead — no last-child exceptions needed. - Reordering with
order: it changes visual order but not keyboard/screen-reader order; use with care.
Flexbox or Grid?#
| Use Flexbox when… | Use Grid when… |
|---|---|
| Content size should drive the layout | The layout should drive content placement |
| One row or one column | Rows and columns together |
| Navbars, toolbars, button groups, media objects | Card grids, page templates, dashboards |
Next: CSS Grid layout and responsive design.
Flexbox FAQ#
Is Flexbox supported everywhere?#
Yes, in every modern browser, including gap for flex layouts.
How do I make items wrap into columns on mobile?#
Use flex-wrap: wrap with a flex-basis, or switch flex-direction to column in a media query. For true grids, Grid is simpler.
Does Flexbox affect performance?#
Not noticeably for normal layouts. Very large, deeply nested flex trees can slow rendering, but that’s rare.