Flex vs Grid：常见布局场景怎么选（附决策清单）

很多人会把 Flex 和 Grid 当成“二选一”，其实更准确的做法是：

组件级排布优先考虑 Flex
页面级网格优先考虑 Grid
一个页面里同时使用两者是常态

这篇文章给你一套可执行判断法，帮你在真实项目里快速决定“这里用 Flex 还是 Grid”。

先记一个核心原则：一维用 Flex，二维用 Grid

Flex（1D）：主轴方向排布（横向或纵向）
Grid（2D）：同时控制行和列

当你的需求是“这排卡片怎么对齐/分布”，Flex 往往更省心。当你的需求是“这整页分几列几行、不同区块怎么占位”，Grid 更自然。

6 个常见场景怎么选

1）导航栏（Logo + 菜单 + 按钮）

优先用 Flex。

原因：元素在一条主轴上，通常是左右分布与垂直居中。

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

2）按钮组 / 标签组

优先用 Flex。

原因：内容长度变化大，Flex 对内容驱动布局更友好。

3）卡片列表（两列/三列/四列）

优先用 Grid。

原因：需要稳定列数和统一间距，Grid 更直接。

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

4）后台页面骨架（侧栏 + 主区 + 右侧信息）

优先用 Grid。

原因：这是典型页面级二维布局，区域关系明确。

5）表单行（标签 + 输入框 + 提示）

小范围用 Flex，复杂表单区块可用 Grid。

原因：单行排布是一维；当你要统一多行字段的列宽时，Grid 更合适。

6）营销落地页模块（Hero、卖点、FAQ、Footer）

推荐组合：

页面框架：Grid（控制大区块）
模块内部：Flex（按钮、图文排列）

决策清单（30 秒判断）

你可以按这 5 个问题快速判断：

我只需要沿一个方向排吗？→ 是：Flex
我需要同时控制行和列吗？→ 是：Grid
布局由内容长度决定吗？→ 常见是：Flex
布局由页面区域决定吗？→ 常见是：Grid
我需要“卡片自动换列”吗？→ Grid 通常更稳

组合写法示例（真实项目最常见）

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

这段代码的思路是：外层定结构（Grid），内层做编排（Flex）。