CSS Flex 与 Grid：谁才是布局之王？

在现代前端开发中，Flexbox 和 Grid 是两大最强布局工具。很多开发者在选择时感到困惑：到底该用哪个？本文带你彻底搞清楚两者的区别，以及各自最适合的场景。

一、核心理念不同

Flexbox（弹性盒） 是一维布局模型，它一次只处理一个方向------要么横向（行），要么纵向（列）。你可以把它想象成一排弹性橡皮筋，元素可以伸缩、对齐，但本质上是线性的。

Grid（网格） 是二维布局模型，同时控制行和列。你可以把它想象成一张表格，但比表格强大得多------元素可以跨行、跨列，整体布局一目了然。

css 复制代码

/* 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. 导航栏

css 复制代码

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

2. 按钮组 / 标签组

css 复制代码

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

3. 垂直居中（经典场景）

css 复制代码

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

4. 卡片内容排列

css 复制代码

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

四、Grid 最擅长的场景

Grid 更适合页面整体的宏观布局，比如：

1. 整体页面结构

css 复制代码

.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. 图片瀑布流 / 画廊

css 复制代码

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

3. 不规则元素跨行列

css 复制代码

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

五、谁的功能更强？

客观来说，Grid 功能更强大。

原因如下：

Grid 是 Flex 的超集：几乎所有 Flex 能做的，Grid 都能做；但 Grid 能做的，Flex 做不到。
二维控制：Grid 同时掌控行和列，Flex 只能管一个方向。
更精准的定位：Grid 可以精确指定元素放在第几行第几列，甚至跨越多行多列。
布局意图更清晰：Grid 布局代码直接描述整体结构，可读性更好。

但这不意味着你应该抛弃 Flex。强大不等于适合。

六、正确的使用姿势

Grid 管大局，Flex 管细节

在实际项目中，两者经常配合使用：

css 复制代码

/* 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，你会发现一个全新的世界。

如果这篇文章对你有帮助，欢迎点赞收藏～