Responsive flex layout

Build a responsive flex layout with flex-wrap.

Flexible wrapping with flex-wrap

A flex container lines up all items in a single row by default. When the screen narrows, items overflow or get squeezed. flex-wrap: wrap lets items drop to the next line when they don't fit, so the flex layout becomes responsive too.

It's the most practical fix for tags, button groups and card rows: however many items there are, they adapt to the screen width.

Base width with flex-basis

Combining flex-wrap: wrap with flex-basis sets each item's base width. flex: 1 1 200px says the item starts at 200 pixels and can stretch; items that don't fit drop to the next line.

This triple (grow, shrink, basis) is flexible: one column on narrow screens, side by side on wide ones, with no extra media query.

Row spacing with gap

When you use flex-wrap: wrap, the gap declaration sets both horizontal and vertical spacing. A single value applies the same spacing in both directions; two values set row then column spacing.

This keeps wrapped items evenly spaced and avoids the mess of margins.

Exercise Make the tag row responsive

Make the .tags container a flex layout; let items wrap when they don't fit and leave 0.5rem of spacing between rows. Write the display, flex-wrap and gap declarations.

Show example solution

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

Test yourself

What does flex-wrap: wrap do?
```
.tags {
  display: flex;
  flex-wrap: wrap;
}
```
- Items drop to the next line when they don't fit
- Forces items into a single row
- Hides all items
- Adds a horizontal scrollbar
Show answer

Items drop to the next line when they don't fit — Correct. wrap moves overflowing items to the next line; the layout stays intact.

Write the wrap value

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

Show answer

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

Match each flex value to its meaning

flex-wrap: nowrap

Force a single row
flex-wrap: wrap

Drop overflow to next line
flex-wrap: wrap-reverse

Wrap in reverse order
flex: 1 1 200px

Start at 200px, stretch

Next lesson: Hiding and showing

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies