CSS Flex Responsive

Flex Items sized each child. Flex Responsive asks the next question: when the viewport shrinks, how should that flex row wrap, stack, or flip direction? Learn a few calm media-query patterns — deep Responsive Design and Media Queries modules come later.

A responsive flex toolkit

📊 Responsive flex at a glance

Tool	Everyday job
`flex-wrap`	Lets items move to a new line when the row is too narrow
`flex-direction`	Flip `row` ↔ `column` at a breakpoint to stack sections
Media query	Applies a new flex rule only when the viewport matches
`flex-basis` / `min-width`	Nudges when cards wrap or stay side-by-side
`gap`	Keeps spacing honest as lines wrap
Avoid `order` for layout	Keep DOM order for keyboard and screen readers

Start from a readable desktop (or mobile-first) flex base. At one clear breakpoint, change only what must change — wrap, direction, or basis — not every property at once.

flex-wrap — let the row breathe

When cards should sit in a row on wide screens and wrap instead of squashing forever, enable wrap and give each card a sensible basis.

Wrapping card row

css

.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Direction flip at a breakpoint

A classic pattern: side-by-side on wide viewports, stacked column on narrow ones. Change flex-direction inside a media query — keep the same HTML.

Stack on small screens

css

.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Basis and min-width for reflow

Pair wrap with flex-basis or min-width so items decide when to drop. A breakpoint can also reset basis if one size never wraps cleanly.

Basis at a breakpoint

css

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Narrow viewports are not a different layout language — same flex tools, different values. Change direction or wrap; do not invent a second HTML tree.

A calm responsive flex habit

One primary breakpoint first. Prefer wrap and direction flips over order reshuffles. Keep source order sensible. Leave fluid images, complex breakpoint systems, and full Responsive theory for later lessons.

Named stack roles

css

.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

Try it yourself

Build a card row with flex-wrap: wrap and flex: 1 1 14rem.
Flip a shell to flex-direction: column under max-width: 40rem.
Force toolbar actions to flex-basis: 100% on a small breakpoint.
Add min-width so chips wrap instead of crushing.
Resist using order to “fix” responsive layout.

Common mistakes

Only shrinking items forever instead of wrapping or stacking
Using order as a responsive layout tool and breaking tab order
Forgetting flex-wrap then wondering why cards never drop
Dumping every flex property into one giant media query
Treating this lesson as the entire Responsive Design course

Summary

Responsive flex adapts wrap, direction, and basis across widths
flex-wrap plus sensible basis/min-width lets rows reflow
Media queries flip flex-direction to stack on narrow screens
Prefer calm breakpoints; avoid order for layout tricks
Deeper Responsive and Media Queries modules come later

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language