"这个布局我该用 Flexbox 还是 Grid?"——这大概是前端写样式时最高频的一次纠结。网上很多文章把它俩讲得对立,搞得像是要二选一。其实根本不是。这篇用一套清晰的决策逻辑,加一张能直接对照的清单,让你以后遇到任何布局都能在三秒内知道该用哪个。
一句话先给答案
布局是"一个方向上的排列"——用 Flexbox;布局是"行和列同时都要管"——用 Grid。
Flexbox 是一维布局工具:它一次只专心管一个方向(要么一行、要么一列)。Grid 是二维布局工具:它同时管行和列,适合搭整体骨架。记住这个"一维 vs 二维"的分界,90% 的选择问题当场就解决了。下面把两者各自的强项展开说清楚。
Flexbox:一维布局的王者
Flexbox 解决的是"一组元素在某一个方向上怎么排"的问题:怎么对齐、怎么分配剩余空间、怎么换行。它的子元素是"流动"的,会根据内容和空间自动伸缩。
/* Flexbox:一行导航,左 logo 右菜单,垂直居中 */
.navbar {
display: flex;
justify-content: space-between; /* 主轴:两端对齐 */
align-items: center; /* 交叉轴:垂直居中 */
}
Flexbox 最舒服的几个场景:导航栏、按钮组、表单的一行、卡片内部的图文排列、垂直水平居中。只要你的需求能用"把这一排/这一列里的东西对齐、分配空间"描述清楚,Flexbox 就是最顺手的工具。justify-content 管主轴、align-items 管交叉轴、gap 管间距、flex: 1 让元素吃掉剩余空间——这几个属性吃透,日常九成的一维布局都不在话下。
Grid:二维布局的标准答案
Grid 解决的是"整个区域怎么划分成行和列、元素放进哪个格子"的问题。它是先定义网格,再把元素往格子里摆——和 Flexbox"元素自己流动"的思路完全不同。
/* Grid:一个经典的"圣杯"页面骨架 */
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左栏 主区 右栏 */
grid-template-rows: 60px 1fr 80px; /* 头 内容 脚 */
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.main { grid-area: main; }
.footer { grid-area: footer; }
注意 grid-template-areas 这个写法:你几乎是在用 ASCII 把页面布局"画"出来,可读性极高。Grid 最适合的场景:整页骨架(头/侧/主/脚)、图片画廊、仪表盘卡片墙、任何"行列都要对齐"的规整布局。它还有一个 Flexbox 给不了的能力——元素可以精确地跨行、跨列,做出错落有致的杂志式排版。
决策清单:遇到具体场景怎么选
| 场景 | 用 | 为什么 |
|---|---|---|
| 导航栏 / 工具栏 | Flexbox | 本质是一行元素的对齐与分布 |
| 整页骨架(头/侧/主/脚) | Grid | 行和列都要管,areas 写法一目了然 |
| 按钮组 / 标签组 | Flexbox | 一维排列,可能需要换行 |
| 图片画廊 / 卡片墙 | Grid | 规整的行列对齐,等宽等高轻松实现 |
| 垂直水平居中一个元素 | 都行 | Flex 三行搞定;Grid 用 place-items:center 更短 |
| 表单一行(标签+输入框) | Flexbox | 一维,要按内容伸缩 |
| 元素需要跨行 / 跨列 | Grid | Flexbox 做不到精确跨格 |
| 内容数量不固定、要自动换行铺满 | Grid(auto-fill) | repeat(auto-fill, minmax()) 是神技 |
有个简单的自检方法:如果你在脑子里描述这个布局时,只提到了"横"或"竖"一个方向,用 Flexbox;如果你同时提到了"几行几列",用 Grid。
它们不是竞争关系,是配合关系
真实项目里,最常见的不是"二选一",而是嵌套使用:外层用 Grid 搭页面大骨架,每个格子内部该用 Flex 就用 Flex。
/* 外层用 Grid 搭页面骨架,某个格子内部用 Flex 排小元素 */
.page { display: grid; grid-template-columns: 240px 1fr; }
.toolbar { /* 这是 Grid 的一个子项,内部又是 Flex */
display: flex;
gap: 12px;
align-items: center;
}
这种"Grid 搭骨架、Flex 填内容"的组合,是现代前端布局的标准做法。别再纠结"我是 Flex 派还是 Grid 派"了——成熟的写法是两个都用,各管各擅长的那一层。
几个常见误区
误区一:用 Flexbox 硬做二维网格。给 flex 容器加 flex-wrap: wrap 确实能挤出多行效果,但各行之间的列是对不齐的——真要规整网格,老老实实用 Grid。
误区二:觉得 Grid 太复杂不敢用。Grid 的基础(grid-template-columns + gap)其实比想象中简单,grid-template-columns: repeat(3, 1fr) 一行就是三等分。复杂的 areas 是进阶,不用一上来就学全。
误区三:还在用 float 或绝对定位做布局。2026 年了,float 是用来做文字绕排的,绝对定位是用来做悬浮层的,它们都不该再是布局主力。Flex 和 Grid 才是。
写在最后
Flexbox 和 Grid 不是要你站队的两个阵营,而是工具箱里互补的两把工具。把"一维用 Flex、二维用 Grid、骨架 Grid 内容 Flex"这套逻辑刻进肌肉记忆,你写布局的速度和质量都会上一个台阶——不再是"试一下这个属性看看效果",而是"我知道这个布局该用什么"。
—— 别看了 · 2026