CSS Flexbox: Stop Fighting Your Layouts · 第 5 / 5 节

Lesson 05: Wrapping into real layouts

Lesson objectives:

Use flex-wrap: wrap so items flow onto multiple rows instead of overflowing.

Space items with gap instead of fiddly margins.

Build a real, responsive nav and card row using everything from this course.

Prerequisites: Lessons 01-04 (axes, alignment, flex-direction, flex-grow) | Previous << 04

Six cards, one row, and a squished mess

You have a row of cards. On a wide screen they fit. On a narrow one they either overflow the container or get crushed thin, because by default a flex line refuses to break — it keeps everything on one row no matter what. That single default is why so many "responsive" card layouts fall apart. The fix is one property to allow wrapping and one to space the result. Then we put the whole course together and build the layouts you actually ship.

Explanation

By default flex-wrap is nowrap, which means a set of items too wide for the container will overflow it¹. That is the crushed-or-overflowing behavior. To let items break onto new lines, set flex-wrap: wrap on the container — items then wrap onto new lines when they run out of room¹.

Wrapping alone can leave items jammed edge to edge. The clean way to space them is the gap property on the container: it creates fixed space between adjacent flex items, and it is a shorthand for row-gap and column-gap¹. Crucially, gap puts space between items only — not on the outer edges — so you don't get the double-margin and edge-overflow headaches that margins cause².

The grid below has six fixed-width cards forced onto one line, so they overflow. Let them wrap onto multiple rows and space them evenly.

Notice the cards are also display: flex themselves — that is how each number is centered inside its card, using justify-content and align-items from Lesson 02. Flex containers nest freely: the grid arranges the cards, and each card arranges its own contents.

Worked example (follow along)

A responsive tag list that wraps and stays evenly spaced at any width:

CSS

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Reading it with the whole course: display: flex puts the tags on the main axis (Lesson 01). flex-wrap: wrap lets them break onto new lines when the row fills up, instead of overflowing. gap: 8px puts even space between every tag, horizontally and vertically, without adding a margin to the last one in a row. Resize the window and the tags reflow on their own — no media query needed for the wrapping itself.

Your turn (faded example)

You want a photo grid where each photo is 150px wide, the grid wraps, and there's 16px of space between photos. Fill in the three declarations on the container:

CSS

.gallery {
  ______;   /* turn it into a flex container */
  ______;   /* allow multiple rows */
  ______;   /* 16px between items */
}
.gallery img { width: 150px; }

Answer: display: flex;, flex-wrap: wrap;, and gap: 16px;. The three lines map exactly to the three ideas: become a flex line, allow that line to break, and space the pieces. That combination is the backbone of nearly every responsive grid you'll build with Flexbox.

Summary + what's next

flex-wrap: wrap lets a flex line break onto multiple rows instead of overflowing, and gap spaces items cleanly without edge margins. Put together with the earlier lessons — display: flex, the two axes, flex-direction, and flex-grow — you now have the full toolkit for centering, nav bars, space distribution, and wrapping card rows. You are no longer guessing which property to reach for; you are reading the axes. That is the difference between fighting your layouts and directing them.

MDN: Mastering wrapping of flex items — https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items ↩ ↩² ↩³
CSS-Tricks: A Complete Guide to Flexbox — https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ↩

Exercises

Exercise 1 · Level 1 (warm-up)

In your own file, build a display: flex row of six fixed-width cards. Shrink the browser window until they overflow. Add flex-wrap: wrap and reload, then add gap. Watch the cards reflow onto rows.

Done criteria · checked locally

Before wrapping, narrowing the window makes the cards overflow or crush.After `flex-wrap: wrap`, the cards break onto multiple rows as the window narrows.After `gap`, the spacing between cards is even, including between rows.

Exercise 2 · Level 2 (capstone — build a real page)

Create a real index.html and style.css in your own editor. Build a top nav and a card row using only Flexbox, then open the file in your browser and verify it with devtools:

A nav bar: a logo on the left, a search input that grows to fill the middle (flex-grow), and a "Sign in" button on the right, all vertically centered.
Below it, a row of six cards that wraps onto multiple rows with an even gap as you resize the window.
Open devtools, select the nav and the card grid, and read their computed flex properties.