What you'll learn
Flexbox is the tool you'll reach for every single day. It lays out items in one dimension — a row or a column — and makes alignment, spacing, and that age-old problem of centering genuinely easy. Learn it well and most layouts become trivial.
By the end you'll be able to:
- Turn any element into a flex container
- Control direction and wrapping
- Align items on both axes — and center anything
- Distribute space with grow, shrink, and
gap
The flex container
Add display: flex to an element and its direct children become flex items, laid out in a row by default. That one line already gives you side-by-side items you can then align. Here's the classic navbar — logo on the left, links on the right:
.nav {
display: flex; /* children become flex items */
justify-content: space-between; /* spread along the main axis */
align-items: center; /* center on the cross axis */
gap: 16px;
}Axes & direction
Flexbox works along two axes. The main axis runs in the direction of flex-direction (row by default, or column), and the cross axis runs perpendicular to it. This matters because the alignment properties each target a specific axis:
| Property | Axis | Does |
|---|---|---|
flex-direction | — | Sets the main axis: row or column |
justify-content | Main | Distributes items along the main axis |
align-items | Cross | Aligns items on the cross axis |
flex-wrap | — | Lets items wrap onto multiple lines |
gap | Both | Adds consistent space between items |
Note
justify-content accepts flex-start, center, flex-end, space-between, space-around, and space-evenly. When you switch flex-direction to column, the axes swap — so justify-content now works vertically. That axis-swap trips up beginners, so keep the main/cross distinction in mind.Aligning items — and centering
The famous party trick: combine justify-content: center and align-items: center to center a child perfectly, both horizontally and vertically. This one pattern solved a problem that plagued web developers for over a decade:
.center {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
min-height: 160px;
}Growing & shrinking
Flex items can flex their size. flex-grow lets an item expand to fill spare space, flex-shrink lets it shrink when space is tight, and flex-basis sets its starting size. The flex shorthand combines all three — flex: 1 is the common way to say "grow to share space equally." Add flex-wrap: wrap so items drop to a new line instead of overflowing on small screens.
Recap & quick check
Key takeaways
- display: flex makes children flex items, laid out along the main axis (row by default).
- justify-content aligns on the main axis; align-items aligns on the cross axis.
- justify-content: center + align-items: center centers a child perfectly on both axes.
- gap adds even spacing; flex-wrap lets items wrap onto new lines.
- flex: 1 grows an item to share available space; flex-basis sets its starting size.
Quick check
1. What does display: flex do?
2. Which property aligns items along the main axis?
3. How do you perfectly center a child with Flexbox?
4. What does flex: 1 on an item do?
5. How do you let flex items move onto a new line when space runs out?
Flexbox handles rows and columns brilliantly. For full two-dimensional layouts, meet its powerful partner: CSS Grid.