Responsive Flexbox
Flex wrap and flex-basis create responsive rows that automatically reflow without media queries.
CSS
Intermediate
4 min read
Responsive Flexbox Patterns
Example
.flex-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.flex-row > * { flex: 1 1 280px; }
/* Items grow equally but wrap below 280px — zero media queries */
.sidebar-layout { display: flex; flex-wrap: wrap; }
.main { flex: 1 1 60%; } .aside { flex: 1 1 260px; } Pro Tip
flex: 1 1 280px means "grow, shrink, and prefer 280px" — a self-responsive item.