CSS Flex Responsive
In this page:
The Wrap-Based Responsive Pattern
The simplest responsive Flexbox technique combines flex-wrap: wrap with a flex-basis (or min-width) on each item — as the container narrows, items that no longer fit on the current line automatically drop to the next one, with zero media queries involved. This alone handles a large share of "cards reflow on mobile" layouts.
Example: The Wrap-Based Responsive Pattern
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.card {
flex-basis: 200px;
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="row">
<div class="card">Card</div>
<div class="card" style="background: seagreen;">Card</div>
<div class="card" style="background: coral;">Card</div>
</div>Percentage-Based flex-basis for Column Counts
Setting flex-basis: 33.33% (roughly) on items inside a wrapping flex row gives you a rough 3-column grid that naturally becomes 2 or 1 columns as the container shrinks and items wrap — the percentage is really "columns per row" in disguise. calc() is often layered on top (e.g. flex-basis: calc(33.33% - 10px)) to account for gaps.
Example: Percentage-Based flex-basis for Column Counts
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex-basis: calc(33.33% - 10px);
background: steelblue;
color: white;
padding: 8px;
margin: 4px;
}
</style>
<div class="row">
<div class="col">1</div>
<div class="col" style="background: seagreen;">2</div>
<div class="col" style="background: coral;">3</div>
</div>min-width as a Wrap Trigger
Instead of a fixed percentage, giving items a min-width (e.g. min-width: 200px) alongside flex-grow: 1 lets the browser decide how many fit per row based on available space — this produces a more naturally responsive grid than a hardcoded percentage, since it adapts to any container width rather than snapping at fixed breakpoints.
Example: min-width as a Wrap Trigger
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.item {
min-width: 200px;
flex-grow: 1;
background: steelblue;
color: white;
padding: 8px;
margin: 4px;
}
</style>
<div class="row">
<div class="item">Adapts to available space</div>
<div class="item" style="background: seagreen;">Adapts to available space</div>
</div>Combining with Media Queries for Direction Changes
Wrap-based reflow handles size changes gracefully, but sometimes you need a structural change — like switching a sidebar layout from side-by-side to stacked — which requires an actual flex-direction: column override inside a media query. The rule of thumb: reach for wrap/basis tricks first, and only add a media query when the *direction* itself needs to change, not just the number of columns.
Example: Combining with Media Queries for Direction Changes
<style>
.layout {
display: flex;
gap: 8px;
}
@media (max-width: 600px) {
.layout {
flex-direction: column;
}
}
.layout div {
background: steelblue;
color: white;
padding: 12px;
}
</style>
<div class="layout">
<div>Sidebar</div>
<div style="background: seagreen;">Content</div>
</div>Common Responsive Flexbox Pitfalls
A frequent mistake is forgetting flex-wrap: wrap entirely and then fighting with overflowing content on narrow screens; another is using flex-basis without flex-shrink: 0 when a fixed minimum size is actually wanted, causing items to shrink below their intended size anyway. Testing at several widths (not just desktop and one mobile size) catches most of these early.
Example: Common Responsive Flexbox Pitfalls
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 200px;
flex-shrink: 0;
}
</style>
<div class="row">
<div class="item">Stays at its intended 200px size</div>
</div>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: