—CSS Series · Post 07: Flexbox
Flexbox
Your First Layout Superpower
Flexbox is the property that makes layouts finally feel logical. Centering, spacing, distributing — things that used to take hacks and guesswork now take two or three lines.
💬 "Why Won't This Just Center?"
Before Flexbox, centering something vertically in CSS was famously painful. People wrote blog posts about it. The solutions involved absolute positioning and negative margins and hoping nothing broke on mobile.
Then Flexbox arrived. And the answer became two lines. Flexbox is a one-dimensional layout system — it arranges items either in a row or a column, and gives you direct control over how they're spaced, aligned, and distributed.
Flexbox has two players: the container (the parent you put display: flex on) and the items (the direct children). Most Flexbox properties go on the container. A few go on individual items. Keep this separation clear and it all makes sense.
🧱 The Flex Axes
Every Flexbox layout has two axes. The main axis is the direction items flow (horizontal by default). The cross axis is perpendicular to it. Which axis is which depends on flex-direction.
🧱 Container Properties
display: flex + flex-direction
justify-content — Spacing Along the Main Axis
Controls how items are distributed along the main axis (horizontally in a row, vertically in a column).
align-items — Alignment Along the Cross Axis
Controls how items align on the cross axis (vertically in a row, horizontally in a column). This is the property that makes vertical centering trivial.
gap — Space Between Items
gap is the cleanest way to add space between flex items. Unlike margins, it only creates space between items — no extra space at the edges.
.container {
display: flex;
gap: 16px; /* same gap in all directions */
gap: 20px 12px; /* row-gap: 20px, column-gap: 12px */
row-gap: 20px; /* vertical gap only */
column-gap: 12px; /* horizontal gap only */
}flex-wrap — Let Items Wrap to New Lines
By default, flex items never wrap — they squish to fit in one line. flex-wrap: wrap lets them break onto multiple rows, which is the foundation of responsive flex layouts.
The Perfect Center — Two Lines
/* Center a div both horizontally AND vertically */
.center-me {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
min-height: 100vh; /* parent needs height */
}
/* That's it. That's the answer. */🧱 Real-World Flexbox
Navbar
.navbar {
display: flex;
justify-content: space-between; /* logo left, links right */
align-items: center; /* vertical center */
padding: 16px 24px;
background: #12121a;
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}Card Grid
.card-grid {
display: flex;
gap: 20px;
flex-wrap: wrap; /* cards wrap on small screens */
}
.card {
flex: 1; /* each card grows to fill space equally */
min-width: 220px; /* prevents cards getting too narrow */
background: #12121a;
border-radius: 12px;
padding: 24px;
}Footer
Mini Build: Full Flex Page Layout
Put it all together: a navbar, a card grid, and a footer — all built with Flexbox. No absolute positioning, no inline-block hacks, no guessing.
HTML structure — three semantic sections, each with the right class.
<nav class="navbar">
<div class="logo">CodeHerWay</div>
<ul class="nav-links">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
</ul>
</nav>
<main class="card-grid">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</main>
<footer class="footer">
<span>© 2025 CodeHerWay</span>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">About</a>
</div>
</footer>Flexbox CSS — three containers, each using the same toolset differently.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 40px 24px;
}
.card {
flex: 1;
min-width: 220px;
background: #12121a;
border-radius: 12px;
padding: 24px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
flex-wrap: wrap;
gap: 12px;
}
.footer-links {
display: flex;
gap: 16px;
}💛 Layout Just Got a Lot Less Frustrating
Flexbox is one of those things that clicks once and then you wonder how you ever built anything without it. The centering problem that haunted CSS developers for years? Two lines. The card grid that used to need float hacks and clearfixes? Four lines.
- display: flex on the parent activates Flexbox — children become flex items automatically
- flex-direction sets whether items flow in a row or column
- justify-content controls spacing on the main axis — center, space-between, etc.
- align-items controls alignment on the cross axis — finally makes vertical centering easy
- gap adds clean space between items with no edge-case side effects
- flex-wrap: wrap lets items flow to new lines — the start of responsive layout
Next: CSS Grid — the two-dimensional counterpart to Flexbox. When Flexbox handles a row or a column, Grid handles both at once. Together they cover every layout you'll ever need to build.
I learned justify-content and align-items backwards for months. Every time I wanted something centered vertically I'd reach for justify-content. It never worked. I'd switch to align-items. Sometimes that worked, sometimes it didn't, and I couldn't explain why.
Then someone drew me the axis diagram — main axis, cross axis, how they flip with flex-direction — and it all locked in instantly. justify-content is always for the main axis. align-items is always for the cross axis. In a row, main = horizontal, so justify-content centers horizontally. Want vertical? That's the cross axis. That's align-items.
Draw the axes once. Remember them. You'll never mix them up again.
