CSS Grid vs Flexbox：何时使用哪个

为什么 Grid 与 Flexbox 之争持续不断

你正在构建一个布局。出于习惯，你选择了 Flexbox，但做到一半你发现自己在和浏览器较劲：嵌套的包裹层、百分比宽度，以及别扭的对齐 hack。与此同时，队友坚称 CSS Grid 三行就能解决。两者都很强大，但它们解决的问题不同。选错工具会导致脆弱的 CSS 和数小时的浪费。

本指南拨开迷雾。你将了解 CSS Grid 和 Flexbox 的核心思维模型，看到并排对比，并获得一份可立即应用的实用决策清单。

核心思维模型

Flexbox 是一维的。它沿单一轴线（行或列）排列项目并分配空间。把它想象成一条可以换行的灵活线。Grid 是二维的。它同时定义行和列，让你将项目放入精确的矩阵中。把它想象成页面的电子表格。

两者都没有“更好”。它们是互补的。大多数真实世界的布局两者都会用到：Grid 用于整体页面骨架，Flexbox 用于导航栏或按钮组等较小组件。

何时使用 Flexbox

当你的布局主要沿一个方向流动，且内容大小应驱动布局时，选择 Flexbox。常见场景：

• 导航栏：一行链接均匀分布，或将 logo 推到左侧、菜单推到右侧。
• 卡片内容：在卡片内垂直对齐图标、标题和描述。
• 按钮组：一组间距一致的按钮。
• 居中单个元素：经典的 display: flex; justify-content: center; align-items: center;。
• 动态内容：当你不确定会有多少项目，并希望它们自然换行时。

Flexbox 擅长分配剩余空间以及相对对齐项目。它是内容优先的：项目决定容器的大小。

何时使用 CSS Grid

当你需要同时控制行和列，或希望将项目放置到特定区域而不受 HTML 顺序影响时，选择 Grid。理想用例：

• 页面级布局：页眉、侧边栏、主内容、页脚按模板排列。
• 复杂卡片网格：某些卡片跨两列或两行的画廊。
• 重叠元素：使用同一网格单元格将项目叠放在一起。
• 一致的间距：使用 gap 统一设置行和列的间距。
• 无需媒体查询的响应式：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 一行创建响应式网格。

Grid 是布局优先的：你定义结构，项目被放入其中。这使它非常适合整体页面架构。

CSS Grid vs Flexbox：快速对比

如何有效结合使用

真正的强大之处在于将一个嵌套在另一个中。典型模式：

1. 使用 Grid 划分主要页面区域：页眉、侧边栏、主内容、页脚。
2. 在页眉内部，使用 Flexbox 对齐 logo 和导航链接。
3. 在主内容区域，使用 Grid 创建卡片画廊。
4. 在每个卡片内部，使用 Flexbox 垂直排列图片、标题和文本。

这种混合方法使你的 CSS 保持模块化，避免过度设计。你在需要的地方获得 Grid 的结构控制，以及 Flexbox 对较小部件的灵活对齐。

实用代码示例

Flexbox：导航栏

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Grid：响应式卡片画廊

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

这一行代码无需媒体查询即可处理任何屏幕尺寸。Flexbox 无法如此简洁地做到这一点，因为它缺乏列定义。

Grid：带命名区域的页面布局

.page {
  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;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

命名区域使布局自文档化。重新排列页面只需编辑模板字符串。

常见陷阱及如何避免

• 用 Flexbox 做二维布局：你最终会得到嵌套的 flex 容器和百分比宽度。改用 Grid。
• 用 Grid 做简单的单行项目：可以工作，但对于未知内容大小，Flexbox 通常更简单、更灵活。
• 忘记在 flex 项目上设置 min-width: 0：防止长文本或图片导致溢出问题。
• 过度使用 order：改变视觉顺序而不更新 DOM 顺序会损害可访问性。尽可能使用 Grid 放置代替。
• 忽略 gap：Grid 和 Flexbox 都支持 gap，消除了 margin hack。

决策清单：你应该使用哪个？

问自己这些问题：

1. 布局是否需要同时控制行和列？→ Grid。
2. 内容是否沿一个方向流动，且大小应由内容驱动？→ Flexbox。
3. 是否需要将项目放置在特定区域或重叠？→ Grid。
4. 是否在容器内对齐几个项目？→ Flexbox。
5. 是否想要无需媒体查询的响应式网格？→ Grid 配合 auto-fit。

如果仍不确定，组件从 Flexbox 开始，页面从 Grid 开始。之后随时可以重构。

常见问题

可以同时使用 CSS Grid 和 Flexbox 吗？

当然可以。它们被设计为互补。使用 Grid 构建整体页面结构，使用 Flexbox 处理导航栏、工具栏和卡片内容等较小组件。

有了 Grid，Flexbox 过时了吗？

没有。Flexbox 仍然是一维布局和内容驱动尺寸的最佳选择。Grid 不是替代品；它是用于二维布局的额外工具。

哪个浏览器支持更好？

两者在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。对于非常旧的浏览器，可能需要回退方案，但如今大多数项目可以放心使用任一工具。

准备好快速测试你的布局想法了吗？使用我们的 HTML to Image 转换器 将你的 HTML/CSS 模型转换为可分享的图片，用于设计评审或文档。