CSS Flexbox
Flex Responsive
Flexbox is naturally responsive: with flex-wrap and sensible flex-basis values, items reflow on their own as the screen shrinks. Add a media query or two and you can restyle the layout at specific breakpoints. This page builds a card grid that adapts from desktop to mobile.
Why Flexbox is Responsive by Default
When you combine flex-wrap:wrap with a flex-basis, each item asks for its preferred width and wraps to the next line when there is not enough room. This gives you a fluid grid that responds to the viewport without a single media query.
In the live result pane, drag the divider to make the preview narrower and watch the cards reflow from a row into a stacked column.
A Self-Adjusting Card Grid
The trick below is flex: 1 1 220px. It says: grow to fill space, shrink if needed, but aim for about 220px wide. As the container narrows, fewer cards fit per row and the rest wrap underneath automatically.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; margin: 0; }
.grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
background: #f8fafc;
}
.card {
flex: 1 1 220px; /* grow, shrink, ~220px basis */
background: #6366f1;
color: #fff;
padding: 28px 20px;
border-radius: 10px;
font-weight: 700;
text-align: center;
}
.card:nth-child(2) { background: #ec4899; }
.card:nth-child(3) { background: #14b8a6; }
.card:nth-child(4) { background: #f59e0b; }
</style>
</head>
<body>
<div class="grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
</div>
</body>
</html>Adding Media Queries for Precise Control
Auto-wrapping handles most cases, but sometimes you want an exact change at a specific width — for example, switching a horizontal navbar into a vertical stack on phones. A media query lets you change flex-direction or basis at a chosen breakpoint.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; margin: 0; }
.bar {
display: flex;
flex-direction: row;
gap: 10px;
padding: 14px;
background: #0f172a;
}
.link {
flex: 1;
background: #38bdf8;
color: #0f172a;
padding: 14px;
border-radius: 6px;
text-align: center;
font-weight: 700;
}
/* Below 600px, stack the links vertically */
@media (max-width: 600px) {
.bar { flex-direction: column; }
}
</style>
</head>
<body>
<nav class="bar">
<div class="link">Home</div>
<div class="link">Jobs</div>
<div class="link">Internships</div>
<div class="link">Contact</div>
</nav>
</body>
</html>Prefer a mobile-first approach: write your base styles for small screens, then use min-width media queries to enhance the layout as the screen gets wider.
Common Responsive Flex Recipes
| Goal | Technique |
|---|---|
| Fluid card grid | flex-wrap: wrap + flex: 1 1 <basis> |
| Sidebar + main content | Sidebar flex: 0 0 260px, main flex: 1 |
| Stack on mobile | @media (max-width) { flex-direction: column } |
| Equal-height columns | align-items: stretch (the default) |
| Consistent spacing | gap instead of per-item margins |
Sidebar Layout That Collapses
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; margin: 0; }
.layout {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
.side {
flex: 1 1 200px;
background: #f97316;
color: #fff;
padding: 24px;
border-radius: 8px;
font-weight: 700;
}
.main {
flex: 3 1 320px;
background: #e2e8f0;
color: #1e293b;
padding: 24px;
border-radius: 8px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="layout">
<aside class="side">Sidebar</aside>
<main class="main">Main content area — wraps below the sidebar on narrow screens.</main>
</div>
</body>
</html>Key Points
- flex-wrap:wrap plus a flex-basis gives you a responsive grid with no media queries.
- flex: 1 1 <basis> is the workhorse pattern for cards that reflow.
- Use media queries to change flex-direction or basis at exact breakpoints.
- Adopt a mobile-first mindset with min-width queries.
- Give a sidebar a fixed-ish basis and let the main content take flex: 1 or more.