Flex Responsive
Flexbox is responsive almost for free — combine flex-wrap with sensible flex-basis values and you rarely need media queries.
The "wrap to a new line" pattern
CSS
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.cards > .card {
flex: 1 1 240px; /* grow, shrink, never narrower than 240px */
}
Cards line up side by side on wide screens, then drop to two columns, then one — without a single @media rule.
Common responsive flex combos
| Goal | Container | Item |
|---|---|---|
| Equal-width buttons that wrap | display: flex; flex-wrap: wrap; gap: 8px; | flex: 1 1 120px; |
| Sticky-footer hero | min-height: 100vh; display: flex; flex-direction: column; | main { flex: 1; } |
| Stack on mobile, row on desktop | display: flex; flex-direction: column; + @media(min-width:768px) { flex-direction: row; } | — |
Flex vs Grid — quick rule
- Flex: items on one axis with flexible sizes — toolbars, button rows, sidebars.
- Grid: two-dimensional, when rows and columns matter — galleries, page layouts.
Tip: Mix them: a Grid page layout with Flex toolbars and lists inside it is the most common pattern in real sites.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>Flex Responsive</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Allow cards to wrap onto new lines.
.cards { display: flex; flex-
: wrap; }
The property with the same name as the value.
Discussion
Loading…