Responsive Flexbox
Flexbox with flex-wrap: wrap and flexible sizing creates responsive rows that reflow naturally when space runs out.
Use Flexbox for 1D layouts (rows or columns) and Grid for 2D layouts.
HTML
Intermediate
5 min read
Flexbox for Responsive Layouts
Example
.nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.card-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card-row > .card {
flex: 1 1 300px; /* grow, shrink, base 300px */
max-width: 400px;
} Pro Tip
flex: 1 1 300px means "be at least 300px wide, but grow and shrink as needed" — a powerful responsive pattern.