Flexbox 与 Grid 布局

CSS 的 Flexbox（弹性盒子）和 Grid（网格）是现代前端开发中最强大的两大布局系统。它们并不是竞争关系，而是互补的搭档。

想要彻底搞懂它们，只需要抓住一个最本质的区别：一维布局 vs 二维布局。

Flexbox 与 Grid 的核心区别

简单来说，Flexbox 像是在一根绳子上串珠子，而 Grid 像是在织一张纵横交错的网。

Flexbox（一维布局）： 它一次只能处理一个方向的布局------要么是水平的一行（row），要么是垂直的一列（column）。它的核心在于"弹性"，即根据容器剩余空间，自动伸缩子元素的尺寸与排列方式。
Grid（二维布局）： 它可以同时控制行和列。你就像在画一张 Excel 表格，可以精确地定义每个元素在第几行、第几列，以及跨越几个单元格。

为了更直观地对比，我们可以通过下表来看清它们的差异：

特性维度	Flexbox (弹性盒子)	Grid (网格布局)
布局维度	一维（只能同时控制行或列）	二维（可以同时控制行和列）
核心思维	内容优先（根据内容自动伸缩）	布局优先（先定义好网格结构）
对齐能力	擅长单行/单列内的对齐与空间分配	擅长整体布局及单元格内部的对齐
间隙控制	使用 `gap` 属性（现代浏览器已支持）	原生支持 `gap`、`row-gap`、`column-gap`
元素重叠	较难实现，通常需要结合定位	轻松实现，通过让元素占据同一网格区域即可

Flexbox 的常见应用场景

Flexbox 非常适合处理组件级别的微观布局，或者任何只需要在一条线上排列元素的场景。

导航栏（Navbar）： 这是 Flexbox 最经典的用法。你可以轻松实现 Logo 在左、菜单在右，并且让所有菜单项垂直居中。
css 复制代码
```
.navbar {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
}
```
绝对居中（Centering）： 在 Flexbox 出现之前，垂直居中是前端开发的噩梦。现在只需三行代码即可完美解决（例如登录框居中）。
css 复制代码
```
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh;
}
```
均分列布局与卡片内部： 比如一个包含头像、输入框和按钮的评论区。你可以让输入框自动占满剩余空间（flex: 1），而头像和按钮保持固定宽度。
粘性页脚（Sticky Footer）： 当页面内容不足一屏时，让页脚始终固定在浏览器底部。只需将页面主体设为 flex-direction: column，并给中间的内容区设置 flex: 1 即可。

Grid 的常见应用场景

Grid 布局是处理页面级别的宏观布局，以及任何需要同时顾及行与列的复杂二维场景的终极武器。

页面整体骨架（圣杯布局）： 经典的"头部 + 侧边栏 + 主内容 + 右侧栏 + 底部"布局。用 Grid 的 grid-template-areas 可以像画画一样语义化地定义出来，代码极其清晰。

css 复制代码

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */
  grid-template-rows: 80px 1fr 60px;
}

响应式卡片/图片画廊： Grid 拥有超强的响应式能力。仅需一行代码，就能实现卡片随屏幕宽度自动换行、自动调整列数，甚至完全不需要写媒体查询（Media Queries）。
css 复制代码
```
.gallery {
  display: grid;
  /* 自动填充列，每列最小300px，最大平分剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
```
复杂的仪表盘（Dashboard）： 仪表盘里通常有各种大小不一的组件（比如有的图表占 2x2 的格子，有的占 1x2）。Grid 可以通过 grid-column: span 2 轻松控制元素跨越多个网格，且自动对齐。
不规则的杂志式排版： 需要打破常规网格，让某些图片占据更大空间形成视觉焦点时，Grid 的二维定位能力是 Flexbox 无法比拟的。

总结与最佳实践：混合双打

在实际的项目开发中，我们通常不会二选一，而是**"混合双打"**：

外层用 Grid：负责搭建整个页面的大框架（如 Header, Sidebar, Main, Footer 的位置）。
内层用 Flexbox：负责具体组件内部的元素排列（如导航栏里的菜单项、卡片里的图文对齐、按钮组等）。

一句话决策指南： 如果你在排一行（或一列），用 Flexbox ；如果你在排一张表（有行又有列），用 Grid。