By default, a flex container keeps all items on one line, shrinking them if it has to. flex-wrap changes that.
| Value | Behaviour |
|---|---|
nowrap | One line, items shrink (default) |
wrap | Items move to a new line when they run out of room |
wrap-reverse | Same, but new lines are added above |
index.html
HTML
<style>
.container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
.box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
.container { display: flex; gap: 6px; margin-bottom: 10px; }
.box { width: 130px; }
.wrap { flex-wrap: wrap; }
</style>
<p>nowrap (default): items squeeze together.</p>
<div class="container"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>wrap: items move to the next line.</p>
<div class="container wrap"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>Six boxes of 130px do not fit in the panel’s width. In the first container they shrink. In the second they wrap.
A simple responsive card row
style.css
CSS
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 240px; }Each card wants to be at least 240px wide, shares extra space, and wraps when the row is full. No media query needed. The flex: 1 1 240px shorthand is explained in flex-grow, flex-shrink and flex-basis.
lightbulb
Prefer grid for equal columns
Wrapped flex items on the last row stretch to fill it, so a row with a single card leaves one huge card. If you want a strict column grid, CSS Grid is a better fit.