当前位置：首页 > 文章列表 > 文章 > 前端 > CSS Grid与Flex布局对比详解

CSS Grid与Flex布局对比详解

2026-04-08 19:35:14 0浏览收藏

什么时候该用 `display: grid` 而不是 `display: flex`

核心判断标准是：布局维度。如果要同时控制**行和列的对齐、间距、尺寸关系**（比如仪表盘、响应式卡片网格、表单布局），grid 是更自然的选择；而 flex 本质是一维布局模型，适合处理**单行或单列内的元素排列与分配空间**（如导航栏、按钮组、居中一个盒子）。

常见误用场景：flex 嵌套多层来模拟网格（比如 flex 容器里再套 flex 行），代码冗长且难以响应式断点调整；此时直接上 grid 更清晰。

grid 的 grid-template-columns 和 grid-template-rows 能显式定义二维轨道，flex 没有对应能力
grid 支持 grid-area 直接跨行跨列定位子项，flex 子项无法“跳格”
若只需让子元素水平居中 + 自动等宽，flex 一行 justify-content: center; flex: 1 就够了，不必动用 grid

`justify-content` 在 flex 和 grid 中行为不同

同名属性，作用对象不同：在 flex 中它控制**主轴上所有子项的整体对齐方式**（比如 space-between 把首尾推到两端）；而在 grid 中，它只影响**轨道（track）内剩余空白的分配**，前提是子项没占满整行（即没用 grid-column: 1 / -1 这类通栏写法）。

容易踩的坑：grid 容器设了 justify-content: center，但子项宽度固定且未声明跨列，结果发现根本没居中——因为 grid 默认按轨道划分空间，子项只是“落在轨道里”，不自动拉伸或重排。

想让 grid 子项水平居中？优先考虑 justify-self: center（作用于子项自身）或给子项加 justify-items: center（作用于容器，影响所有子项）
flex 的 justify-content 对单个子项无效（除非是唯一子项），而 grid 的 justify-self 可以单独控制每个子项
注意兼容性：justify-self 在旧版 Safari（-webkit- 前缀

响应式重排时，`grid-template-areas` 比 `flex-wrap` 更可控

当需要在小屏把「头图+正文+侧边栏」变成「头图→正文→侧边栏」垂直堆叠，在大屏变成「头图横跨两行、正文左、侧边栏右」，grid-template-areas 配合媒体查询能用几行代码搞定；而用 flex 实现类似效果，往往得靠 order + 多层嵌套 + flex-basis 微调，逻辑易错且难维护。

示例关键片段：

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside";
}
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "aside";
  }
}