Frontend Academy · 课时

使用 Flexbox 进行布局

Q: 「使用 Flexbox 进行布局」这节课中我会学到什么？

使用 Flexbox 在行或列中对齐项目、分配空间，并在不依赖浮动技巧的情况下换行内容。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Flexbox 在行或列中对齐项目、分配空间，并在不依赖浮动技巧的情况下换行内容。

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

什么是弹性盒布局

弹性盒布局（Flexible Box Layout）是一种 CSS 布局模型，专为一维布局设计——沿单行或单列分配空间。它解决了浮动布局难以优雅处理的问题。

启用弹性盒布局

将 display: flex 应用到 container 上。它的直接子元素会自动成为弹性项目。这些项目的子元素不受影响。

.container {
  display: flex;
}
/* All direct children are now flex items */

flex-direction

设置主轴。row（默认值）：项目从左到右排列。row-reverse：从右到左排列。column：从上到下排列。column-reverse：从下到上排列。

.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; }

justify-content——主轴对齐

沿主轴分配空间。可选值包括 flex-start（默认值）、flex-end、center、space-between、space-around 和 space-evenly。

.nav {
  display: flex;
  justify-content: space-between; /* logo left, links right */
}
.centered {
  display: flex;
  justify-content: center; /* items in the middle */
}

align-items——交叉轴对齐

沿交叉轴（垂直于主轴的方向）对齐项目。可选值包括 stretch（默认值）、center、flex-start、flex-end 和 baseline。

.card {
  display: flex;
  align-items: center; /* vertically center content */
}

gap 属性

gap: row-gap column-gap 会在弹性项目之间添加间距，而无需使用 margin。这比使用 margin 的变通方法整洁得多，并且现代浏览器普遍支持。

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;        /* 24px in all directions between items */
  gap: 16px 24px;  /* row-gap column-gap */
}

flex-wrap

默认情况下，弹性项目会挤在同一行中。flex-wrap: wrap 允许项目在空间不足时换到新行。将它与 gap 结合使用，可以创建简单的响应式网格。

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

项目上的 flex 简写属性

在弹性项目上使用 flex: grow shrink basis。flex: 1 是 1 1 0% 的简写——项目会等比例增长，并忽略自身内容尺寸。flex: 0 0 200px 会创建一个固定宽度为 200px 的项目。

.sidebar { flex: 0 0 240px; }   /* fixed width */
.main    { flex: 1; }            /* takes remaining space */

align-self

弹性项目上的 align-self 会覆盖 container 的 align-items 设置，仅影响该项目。它适合让某个项目与同级项目采用不同的对齐方式。

.container { display: flex; align-items: center; }
.tall-item  { align-self: flex-start; }

order 属性

order 可以控制弹性项目的视觉顺序，而不会改变 HTML 顺序。默认值为 0。数值较小的项目会排在前面。请谨慎使用——它会造成视觉顺序与 DOM 顺序或阅读顺序不一致。

使用弹性盒布局居中

同时水平和垂直居中 element 的最简单方法是：将父级设置为 display: flex; justify-content: center; align-items: center。

.overlay {
  position: fixed;
  inset: 0;  /* shorthand for top/right/bottom/left: 0 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
}

快速检查

哪个 Flexbox 属性会沿主轴在项目之间分配空间？

回顾：弹性盒布局基础

在 container 上设置 display: flex。使用 flex-direction: row 或 column 设置轴方向。使用 justify-content 设置主轴间距。使用 align-items 设置交叉轴对齐。使用 gap 设置项目间距。使用 flex-wrap 实现多行布局。在项目上使用 flex 简写属性控制增长。这是一种灵活的一维布局系统。

常见问题解答

「使用 Flexbox 进行布局」课时是免费的吗？

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

「使用 Flexbox 进行布局」这节课中我会学到什么？

使用 Flexbox 在行或列中对齐项目、分配空间，并在不依赖浮动技巧的情况下换行内容。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「使用 Flexbox 进行布局」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy