CSS Flex 与 Grid：谁才是布局之王？
在现代前端开发中，Flexbox 和 Grid 是两大最强布局工具。很多开发者在选择时感到困惑：到底该用哪个？本文带你彻底搞清楚两者的区别，以及各自最适合的场景。
一、核心理念不同
Flexbox（弹性盒） 是一维布局模型，它一次只处理一个方向——要么横向（行），要么纵向（列）。你可以把它想象成一排弹性橡皮筋，元素可以伸缩、对齐，但本质上是线性的。
Grid（网格） 是二维布局模型，同时控制行和列。你可以把它想象成一张表格，但比表格强大得多——元素可以跨行、跨列，整体布局一目了然。
/* Flexbox：一维，沿主轴排列 */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Grid：二维，同时定义行列 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
}
二、核心区别对比
| 对比项 | Flexbox | Grid |
|---|---|---|
| 维度 | 一维（行或列） | 二维（行+列） |
| 控制方向 | 由内容决定 | 由布局决定 |
| 对齐能力 | 强（主轴+交叉轴） | 更强（行+列双向） |
| 元素跨越 | 不支持跨行/列 | 支持 span 跨行列 |
| 间距控制 | gap（现代）/ margin | gap（精准） |
| 浏览器支持 | 极好 | 极好（IE11部分支持） |
| 上手难度 | 低 | 中 |
三、Flexbox 最擅长的场景
Flex 更适合组件内部的微观布局，比如：
1. 导航栏
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
2. 按钮组 / 标签组
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
3. 垂直居中（经典场景）
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
4. 卡片内容排列
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
四、Grid 最擅长的场景
Grid 更适合页面整体的宏观布局，比如：
1. 整体页面结构
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 40px;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
2. 图片瀑布流 / 画廊
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
3. 不规则元素跨行列
.featured {
grid-column: span 2;
grid-row: span 2;
}
五、谁的功能更强？
客观来说，Grid 功能更强大。
原因如下：
- Grid 是 Flex 的超集：几乎所有 Flex 能做的，Grid 都能做；但 Grid 能做的，Flex 做不到。
- 二维控制：Grid 同时掌控行和列，Flex 只能管一个方向。
- 更精准的定位：Grid 可以精确指定元素放在第几行第几列，甚至跨越多行多列。
- 布局意图更清晰：Grid 布局代码直接描述整体结构，可读性更好。
但这不意味着你应该抛弃 Flex。强大不等于适合。
六、正确的使用姿势
Grid 管大局，Flex 管细节
在实际项目中，两者经常配合使用：
/* Grid 定义页面骨架 */
.layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
}
/* Flex 处理组件内部排列 */
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
一个简单的判断标准：
- 需要同时控制行和列？→ 用 Grid
- 只需要单方向排列内容？→ 用 Flex
- 做整体页面布局？→ Grid
- 做组件内部对齐？→ Flex
总结
| Flexbox | Grid | |
|---|---|---|
| 适合 | 组件级、单维度、内容驱动 | 页面级、双维度、布局驱动 |
| 一句话 | 让内容自适应流动 | 先定好格子再填内容 |
| 功能强度 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
Flex 和 Grid 不是竞争关系，而是互补关系。掌握两者，才能在面对任何布局需求时游刃有余。
如果只能选一个入门，先学 Flex，因为它更直觉、上手快；等你对布局有了感觉，再深入 Grid，你会发现一个全新的世界。
如果这篇文章对你有帮助，欢迎点赞收藏～
