CSS Flexbox：弹性布局入门 · Lesson 5 of 5

第 5 课：换行与真实布局

本课目标：

  • 用 flex-wrap: wrap 让 item 流到多行，而不是溢出容器。
  • 用 gap 拉开 item 间距，代替琐碎的 margin。
  • 用整门课学到的东西，搭一个真实的响应式导航栏和卡片行。

先修条件：第 1-4 课（两条轴、对齐、flex-direction、flex-grow） | 上一篇 << 04

六张卡片挤在一行，成了一团压扁的乱局

你有一行卡片。宽屏上放得下。窄屏上它们要么溢出容器，要么被压得极窄，因为默认情况下 flex 行拒绝断行：不管怎样它都把所有东西留在同一行。就这一个默认值，毁掉了大量“响应式”卡片布局。修法是一个属性放行换行，另一个属性拉开间距。然后我们把整门课拼起来，搭出你真正会上线的那种布局。

讲解

flex-wrap 的默认值是 nowrap，意思是一组对容器来说太宽的 item 会溢出它1。这就是压扁或溢出的来历。要让 item 断到新行，在容器上设 flex-wrap: wrap，item 在空间不够时就会换到新的行上1。

只换行还可能让 item 边贴边挤在一起。干净的间距做法是容器上的 gap 属性：它在相邻 flex item 之间创建固定间距，并且是 row-gap 和 column-gap 的简写1。关键在于 gap 只把间距放在 item 之间，不放在外边缘，所以你不会碰上 margin 常见的双倍间距和边缘溢出的麻烦2。

下面的网格里有六张固定宽度的卡片被迫挤在一行，所以它们溢出了。让它们换到多行，并均匀拉开间距。

注意这些卡片自己也是 display: flex：每张卡片里的数字正是用第 2 课的 justify-content 和 align-items 居中的。flex 容器可以自由嵌套：网格安排卡片，每张卡片安排自己的内容。

完整示例（跟着做）

一个响应式标签列表，任意宽度下都能换行并保持均匀间距：

用整门课的知识读它：display: flex 把标签摆上主轴（第 1 课）。flex-wrap: wrap 让它们在一行放满时断到新行，而不是溢出。gap: 8px 在每个标签之间放上均匀的水平和垂直间距，也不会给一行末尾的标签多加 margin。缩放窗口，标签自己重新排布，换行本身不需要任何媒体查询。

你来试试（填空示例）

你想要一个照片墙：每张照片 150px 宽，网格可以换行，照片之间留 16px 间距。填上容器的三条声明：

答案：display: flex;、flex-wrap: wrap; 和 gap: 16px;。三行正好对应三个概念：变成一条 flex 行、允许这条行断开、把碎块之间的距离拉开。这套组合是你用 Flexbox 搭的几乎每个响应式网格的骨架。

小结 + 下节课预告

flex-wrap: wrap 让 flex 行断到多行而不是溢出，gap 不碰外边缘、干净地拉开 item 间距。和前几课的 display: flex、两条轴、flex-direction、flex-grow 拼在一起，你已经有了居中、导航栏、空间分配和换行卡片行的整套工具。你不再猜该伸手拿哪个属性，你在读轴。这就是被布局拖着走和指挥布局的差别。

Footnotes

  1. MDN: Mastering wrapping of flex items — https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items ↩ ↩2 ↩3

  2. CSS-Tricks: A Complete Guide to Flexbox — https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ↩

Exercises

01

在你自己的文件里，搭一行六张固定宽度卡片的 display: flex。把浏览器窗口缩窄，直到它们溢出。加上 flex-wrap: wrap 并刷新，然后再加 gap。看着卡片重新排成多行。

第 1 级（热身）
Done criteria · checked locally
02

在你自己的编辑器里新建真实的 index.html 和 style.css。只用 Flexbox 搭一个顶部导航栏和一个卡片行，然后在浏览器里打开文件，用 devtools 验证：

第 2 级（结课作业：搭一个真实页面）
  1. 一个导航栏：logo 在左，中间的搜索输入框长开填满空间（flex-grow），右边一个“Sign in”按钮，全部垂直居中。
  2. 下面是一行六张卡片，随着窗口缩放换到多行，gap 间距均匀。
  3. 打开 devtools，选中导航栏和卡片网格，读出它们的计算 flex 属性。
Done criteria · checked locally