Grid 和 Flex 的区别？什么时候用哪个？
核心区别
| 特性 | Flex | Grid |
|---|---|---|
| 维度 | 一维（行或列） | 二维（行和列） |
| 设计思路 | 内容优先 | 布局优先 |
| 适合 | 组件内布局 | 页面整体布局 |
| 项目排列 | 自动流式排列 | 精确定位到网格 |
| 重叠 | 不支持 | 支持（z 轴层叠） |
什么时候用 Flex
- 导航栏：水平排列菜单项
- 按钮组：一行按钮
- 卡片内容：图标+文字+操作
- 表单行：标签+输入框
- 居中：水平垂直居中最简方案
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}什么时候用 Grid
- 页面骨架：Header/Sidebar/Main/Footer
- 图片画廊：行列网格
- 表单布局：标签和输入框对齐
- 仪表盘：多区域仪表盘布局
- 需要行列同时控制：任何需要二维定位的布局
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}组合使用（最佳实践）
页面用 Grid，组件内用 Flex：
/* 页面骨架用 Grid */
.page {
display: grid;
grid-template-columns: 200px 1fr;
}
/* 组件内部用 Flex */
.card {
display: flex;
flex-direction: column;
gap: 12px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}选择原则
- 需要行列同时控制 → Grid
- 只需控制一个方向 → Flex
- 不确定 → 先试 Flex（更简单），不够再换 Grid