Frontend Academy · 课时

Flexbox 深入：对齐、换行与顺序

掌握 justify-content、align-items、align-self、flex-wrap、flex-grow、flex-shrink、flex-basis 和 order 属性。

第 1 / 4 课13 个步骤

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

复习：弹性容器与弹性项目

回顾：容器上的 display: flex 会将直接子元素创建为弹性项目。主轴沿方向属性指定的方向延伸。交叉轴与主轴垂直。

内容对齐方式的值详解

行方向容器中的所有内容对齐方式值：flex-start（默认）、flex-end、center、space-between（仅在项目之间创建间距）、space-around（每个项目周围的外边距相等）、space-evenly（所有间距相等）。

.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around   { justify-content: space-around; }
.space-evenly   { justify-content: space-evenly; }
.center         { justify-content: center; }

项目对齐与内容对齐的区别

align-items 会在单行内对齐项目。align-content 会对齐多行内容（仅在启用换行且存在多行时有效）。

.single-line { display: flex; align-items: center; }

.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* space between rows */
}

单个项目的独立对齐

align-self 会针对特定弹性项目覆盖 align-items 的设置。它适用于让一个项目拉伸，而其他项目保持居中。

.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */

换行与反向换行

flex-wrap: wrap 允许项目流入新行。wrap-reverse 会换行，但方向相反。将其与 gap 结合，可以简单地创建响应式网格。

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card-grid > * {
  flex: 1 1 280px; /* grow, shrink, min-width */
  max-width: 400px;
}

弹性增长、弹性收缩与弹性基准

这是用于项目的三部分弹性简写形式。flex-grow：可用空间的分配比例。flex-shrink：空间紧张时的收缩速率。flex-basis：增长或收缩前的初始大小。

.sidebar { flex: 0 0 250px; }  /* don't grow, don't shrink, 250px */
.main    { flex: 1 1 0%; }     /* grow to fill, shrink, no base */
.fixed   { flex: 0 0 100px; }  /* fixed 100px */

常见的弹性简写形式

flex: 1 = 1 1 0%。flex: auto = 1 1 auto。flex: none = 0 0 auto。flex: 2 = 2 1 0%（占用的空间是弹性值 1 的两倍）。

排序属性

order 可以在不修改 HTML 的情况下改变弹性项目的视觉顺序。默认值为 0。负值会显示在 0 之前。请谨慎使用——视觉顺序与 DOM 顺序不一致会让键盘用户和屏幕阅读器用户感到困惑。

.sidebar { order: -1; }  /* appears first visually regardless of DOM order */
.main    { order: 0; }   /* default */

使用最小宽度为 0 修复溢出

弹性项目隐式具有 min-width: auto，这意味着它们不会收缩到内容大小以下。设置 min-width: 0 可以允许它们进一步收缩——这对于弹性项目中的文本截断至关重要。

.flex-item {
  min-width: 0;  /* allows shrinking below content size */
}
.flex-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

不使用 gap 创建弹性间距

在不支持间距属性的旧环境中，可以在项目上使用外边距，并在容器上使用负外边距来创建间隔。不过如今所有现代浏览器都支持 gap，因此请优先使用它。

嵌套弹性容器

任何弹性项目本身也可以是弹性容器。对于复杂布局，可以嵌套使用弹性盒布局：例如卡片组成一行，而每张卡片内部也采用弹性排列。这是现代布局中的常见模式。

.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  flex: 1;  /* push footer to the bottom */
}
.card-footer {
  margin-top: auto; /* or use flex: 0 on footer */
}

快速检查

启用换行时，哪个属性会沿交叉轴在弹性项目之间分配空间？

在交互式课程中回答

回顾：深入理解弹性盒布局

使用内容对齐方式在主轴上分配空间。使用项目对齐方式处理单行交叉轴。使用内容对齐处理多行交叉轴。使用单项目对齐设置单个项目。启用换行可实现多行布局。弹性简写控制增长、收缩和基准大小。排序属性会改变视觉顺序。将最小宽度设为 0 可避免收缩问题。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 41
课程: 163

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

常见问题解答

「Flexbox 深入：对齐、换行与顺序」课时是免费的吗？

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

「Flexbox 深入：对齐、换行与顺序」这节课中我会学到什么？

掌握 justify-content、align-items、align-self、flex-wrap、flex-grow、flex-shrink、flex-basis 和 order 属性。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「Flexbox 深入：对齐、换行与顺序」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy