CSS Grid 与 Flexbox 该怎么选：常见布局场景的对照与取舍

引言

CSS Grid 和 Flexbox 都是现代 CSS 布局的核心工具，但很多开发者不清楚在具体场景中该用哪一个。本文通过常见布局场景的对照，帮你快速做出选择。

核心区别：一维 vs 二维

• Flexbox 是一维布局模型，一次主要处理一行或一列。它擅长在单个方向上分配空间、对齐和排序。
• Grid 是二维布局模型，同时定义行和列。它擅长创建复杂的网格结构，控制项目在行和列上的位置。

简单记：Flexbox 管一条线，Grid 管一个面。

常见场景对照

1. 导航栏（水平菜单）

推荐：Flexbox

导航项通常只需要水平排列、均匀分布或两端对齐。Flexbox 的 justify-content 和 align-items 可以轻松实现。

.nav {
  display: flex;
  justify-content: space-between; /* 或 center、space-around */
  align-items: center;
}

2. 卡片网格（等宽卡片自适应）

推荐：Grid

需要同时控制行和列，并让卡片自动换行、等宽。Grid 的 repeat(auto-fill, minmax()) 是最佳方案。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

3. 圣杯布局（页头、页脚、侧边栏、主内容）

推荐：Grid

需要定义区域的行列关系，Grid 的 grid-template-areas 非常直观。

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

4. 垂直居中单个元素

推荐：Flexbox

Flexbox 的 place-items: center 或 justify-content + align-items 是最简洁的方案。Grid 也能做，但 Flexbox 更常用。

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

5. 表单行（标签与输入框对齐）

推荐：Grid

需要让标签和输入框在列上对齐。Grid 的 grid-template-columns: auto 1fr 可以轻松实现。

.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
}

6. 未知数量的项目等分空间

推荐：Flexbox

当项目数量不确定，但需要它们等分容器宽度时，Flexbox 的 flex: 1 非常方便。

.tabs {
  display: flex;
}
.tab {
  flex: 1;
  text-align: center;
}

取舍原则

1. 先看维度：一维用 Flexbox，二维用 Grid。
2. 看内容驱动还是布局驱动：内容决定尺寸（如导航项）用 Flexbox；布局决定尺寸（如网格）用 Grid。
3. 可以混用：Grid 容器内的项目可以是 Flexbox 容器，反之亦然。
4. 不必二选一：现代浏览器都支持，根据具体需求灵活选择。

浏览器支持

Flexbox 和 Grid 在所有现代浏览器中都已得到良好支持。对于旧版浏览器（如 IE11），Grid 的支持不完整，但 Flexbox 支持较好。若需兼容 IE11，建议使用 Flexbox 并避免使用 Grid 的自动放置等高级特性。

总结

• Flexbox：适合一维布局、内容驱动、需要灵活伸缩的场景。
• Grid：适合二维布局、结构明确、需要精确控制行列的场景。

掌握两者的核心差异，根据实际场景选择，才能写出更简洁、可维护的 CSS。