PricingLoginStart free
CSS Academy · 课时

Flex 换行与 Align-Content

允许 Flex 项目换行到多行，并使用 align-content 对换行后的行进行对齐。

第 3 / 4 课13 个步骤

Flex 换行与 Align-Content 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

flex-wrap: nowrap（默认）

默认情况下，弹性项目不会换行。如果项目超出容器宽度，它们会收缩或溢出，而不会换到新行。

flex-wrap: wrap

使用 flex-wrap: wrap 时，超出主轴的项目会换到新行（在列方向下则换到新列）。每一行换行后的项目都相当于一个独立的小型弹性容器。

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse 会沿相反的交叉轴方向换行：在行方向下，新行会出现在上方而不是下方。

卡片换行模式

这是一种经典的响应式卡片布局：视口变窄时，卡片会换到下一行：

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

多行布局中的 align-content

align-content 控制交叉轴上换行后各行之间的间距。只有一行时，该属性不会产生效果。它的取值与 justify-content 相似。

align-content 的取值

可用的取值：

  • flex-start —— 将各行聚集到交叉轴起点
  • flex-end —— 将各行聚集到交叉轴终点
  • center —— 将各行居中
  • space-between —— 在各行之间分配相等的空间
  • space-around —— 在各行周围分配相等的空间
  • stretch —— 拉伸各行以填满空间（默认）
<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items 与 align-content

区别如下：

  • align-items —— 对齐每一行内部的项目
  • align-content —— 在容器内对齐弹性行本身

弹性盒中的间距

gap 属性（之前称为 grid-gap）可以在不使用外边距的情况下，为弹性项目之间添加一致的间距。它同时适用于行间距和列间距。

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

无需媒体查询的响应式换行

使用固定的理想尺寸，让项目自动换行到能够容纳的列数。无需媒体查询：

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

flex-flow 简写属性

flex-flow 将 flex-direction 和 flex-wrap 组合在一个声明中：

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

换行与网格布局

对于具有明确行和列的复杂二维布局，CSS 网格布局更为合适。弹性盒换行最适合一维内容，只是这些内容恰好流动成了多行。

快速检查

当弹性容器包含多行时，哪个属性可以对齐这些换行后的行本身？

在交互式课程中回答

回顾

flex-wrap: wrap 允许项目流动到新行。align-content 控制多行容器中这些行之间的间距。使用 gap 设置一致的间距。将 flex: 1 1 250px 与 flex-wrap 结合使用，可以在无需媒体查询的情况下创建响应式卡片网格。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
40
课程
159
免费开始学习查看完整课程

常见问题解答

「Flex 换行与 Align-Content」课时是免费的吗？

是的 — 「Flex 换行与 Align-Content」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Flex 换行与 Align-Content」这节课中我会学到什么？

允许 Flex 项目换行到多行，并使用 align-content 对换行后的行进行对齐。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「Flex 换行与 Align-Content」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Display、Flex 与 Flex Direction
  2. Justify-Content 与 Align-Items
  3. Flex 换行与 Align-Content
  4. Flex Grow、Shrink 与 Basis
← 返回 CSS Academy