CSS Flexbox: A Practical Visual Guide
Flexbox is a one-dimensional layout system: it distributes space along a single axis (a row or a column) and aligns items on the perpendicular one. Once the two-axis mental model clicks, every property makes sense. Experiment live in our flexbox generator while you read.
The two axes
flex-direction sets the main axis (row by default). justify-content distributes items along the main axis; align-items aligns them on the cross axis. That's the whole trick — and why "why won't it center vertically?" is usually a mixed-up axis: in a row, vertical centering is align-items: center.
| Property | Axis | Common values |
|---|---|---|
| justify-content | Main | flex-start · center · space-between · space-evenly |
| align-items | Cross | stretch (default) · center · flex-start · baseline |
| align-self | Cross (one item) | overrides align-items per item |
| flex-direction | Defines main | row · column · *-reverse |
The centering incantation
.parent { display: flex; justify-content: center; align-items: center; }Growing, shrinking, wrapping
Each item has flex-grow (share of leftover space), flex-shrink (how it gives up space) and flex-basis (starting size) — usually written as shorthand: flex: 1 means "share space equally". flex-wrap: wrap plus gap replaces most old grid hacks for card rows. Use gap instead of margins between items — it spaces without edge side-effects.
Flexbox or Grid?
Flexbox excels at one-dimensional flow: navbars, toolbars, button rows, centering, distributing unknown-width items. When you need rows and columns aligned simultaneously — dashboards, galleries, page scaffolding — reach for CSS Grid. They compose beautifully: Grid for the page, flex inside the components.