0Pricing
Frontend Academy · 课时

组合使用 Flexbox 与 Grid

使用 Grid 处理页面的宏观布局，使用 Flexbox 处理组件级对齐，并了解何时应选择哪种工具。

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

它们是互补工具

弹性盒布局和网格布局并非竞争关系——它们是为协同工作而设计的。典型模式是：使用 CSS 网格布局构建页面的宏观结构，然后在每个网格区域内使用弹性盒布局来排列组件内容。

使用网格布局构建页面，使用弹性布局构建组件

使用网格布局定义页面的高层骨架。在每个网格区域内部，使用弹性盒布局进行组件级排列：例如让导航链接排列成一行，让卡片内容排列成一列。

/* Page skeleton */
body {
  display: grid;
  grid-template-areas: 'header' 'main' 'footer';
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Component inside grid area */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

卡片网格模式

经典模式是：使用网格布局排列卡片，使用弹性布局排列每张卡片的内部内容。这样可以确保卡片在网格中对齐，同时让内部内容（图片、标题、正文和页脚）正确堆叠。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.card-body { flex: 1; }  /* push footer down */

导航栏模式

常见的导航栏会结合两种布局。导航栏本身是一个弹性容器，用于排列徽标和链接。链接区域可能是另一个弹性容器。大型菜单可能使用网格布局进行多列排列。

圣杯布局

如今使用网格布局即可轻松实现“圣杯”布局（页眉、三列主体和页脚）。三列——左侧边栏、主内容和右侧边栏——是网格列；每列内部的内容则使用弹性盒布局。

.page {
  display: grid;
  grid-template:
    'header header header' auto
    'left   main   right'  1fr
    'footer footer footer' auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

内容居中——网格布局或弹性盒布局

网格布局和弹性盒布局都可以完美地让内容居中。网格布局：place-items: center（align-items 与 justify-items 的简写）。弹性布局：justify-content: center; align-items: center。

.center-grid {
  display: grid;
  place-items: center; /* centers both axes */
  min-height: 100vh;
}

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

响应式侧边栏布局

移动端：单列布局（导航位于顶部）。平板及更大屏幕：侧边栏与内容并排显示。网格布局以声明式方式实现这一点——在媒体查询中更改模板区域。

图标加文本模式

这是非常常见的微型布局：让图标位于文本旁边。弹性盒布局非常适合这种场景，因为它本质上是一个带有对齐方式的单行布局。

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }

何时选择哪一种

选择网格布局的情况：您按行和列思考，需要让项目跨轨道对齐，或正在构建页面骨架。选择弹性布局的情况：您只考虑一个方向，需要项目收缩和增长，或正在排列一行按钮或一列项目。

不要过度设计

有时，一个带最大宽度和自动外边距的简单块级元素比复杂网格更好。并非所有布局都需要网格布局。请使用能完成任务的最简单工具。

调试布局问题

在 DevTools 中，点击元素面板里的网格或弹性布局标记，可以叠加显示网格线或弹性项目轮廓。这样可以让不可见的布局结构变得可见，对于诊断对齐问题非常有价值。

快速检查

分别用于页面级和组件级布局时，哪种布局工具组合最常见？

回顾：结合网格布局与弹性布局

网格布局与弹性盒布局互补。使用网格布局构建二维页面结构。使用弹性盒布局处理一维组件内部布局。在网格上使用 place-items: center 可以让所有内容居中。在卡片主体上使用 flex-direction: column + flex: 1 可以将卡片页脚推到底部。使用 DevTools 叠加标记进行调试。

常见问题解答

「组合使用 Flexbox 与 Grid」课时是免费的吗？

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

「组合使用 Flexbox 与 Grid」这节课中我会学到什么？

使用 Grid 处理页面的宏观布局，使用 Flexbox 处理组件级对齐，并了解何时应选择哪种工具。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「组合使用 Flexbox 与 Grid」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. Flexbox 深入：对齐、换行与顺序
  2. CSS Grid：模板区域、auto-fit 与 minmax
  3. 组合使用 Flexbox 与 Grid
  4. 用于主题设置的 CSS 变量
← 返回 Frontend Academy