一、一句话先分清（先立认知）
Flex：一维布局（一行或一列）
Grid：二维布局（行 + 列一起管）
👉 你只要记住这句，80% 场景就不会选错。
二、Flex 布局：属性 & 含义（重点）
1️⃣ 容器属性（父元素）
display: flex | inline-flex
开启 flex 布局。
flex-direction
主轴方向
| 值 | 含义 |
|---|---|
| row | 横向（默认） |
| row-reverse | 横向反向 |
| column | 纵向 |
| column-reverse | 纵向反向 |
justify-content
主轴对齐方式
| 值 | 含义 |
|---|---|
| flex-start | 起点对齐 |
| center | 居中 |
| flex-end | 终点 |
| space-between | 两端对齐 |
| space-around | 平均环绕 |
| space-evenly | 等间距 |
align-items
交叉轴对齐（单行）
| 值 | 含义 |
|---|---|
| stretch | 拉伸（默认） |
| center | 居中 |
| flex-start | 起点 |
| flex-end | 终点 |
| baseline | 基线对齐 |
flex-wrap
是否换行
| 值 | 含义 |
|---|---|
| nowrap | 不换行（默认） |
| wrap | 换行 |
| wrap-reverse | 反向换行 |
align-content
多行时交叉轴对齐
⚠️ 必须
flex-wrap: wrap
| 值 | 含义 |
|---|---|
| stretch | 拉伸 |
| center | 居中 |
| space-between | 两端 |
| space-around | 环绕 |
2️⃣ 项目属性（子元素）
flex
最常用，也是最容易乱的
flex: grow shrink basis;
| 参数 | 含义 |
|---|---|
| grow | 放大比例 |
| shrink | 缩小比例 |
| basis | 初始大小 |
📌 常见写法：
flex: 1; /* 1 1 0 */
flex: 0 0 auto;
align-self
单独控制某一项的对齐
align-self: center;
order
改变显示顺序（⚠️ 不影响 DOM）
三、Grid 布局：属性 & 含义（重点）
1️⃣ 容器属性（父元素）
display: grid | inline-grid
开启 grid 布局。
grid-template-columns / rows
定义网格
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: auto 200px;
单位说明：
px固定fr剩余空间比例auto自适应
gap（重点）
gap: 10px 20px;
= 行间距 + 列间距
justify-items / align-items
单元格内容对齐
| 属性 | 方向 |
|---|---|
| justify-items | 水平 |
| align-items | 垂直 |
justify-content / align-content
整个 grid 在容器中的对齐
grid-auto-flow
自动放置方向
| 值 | 含义 |
|---|---|
| row | 按行放（默认） |
| column | 按列放 |
| dense | 紧凑填充 |
2️⃣ 项目属性（子元素）
grid-column / grid-row
元素占几格
grid-column: 1 / 3;
grid-row: 2 / 4;
grid-area
配合模板使用（语义化强）
grid-template-areas:
"header header"
"aside main";
.header {
grid-area: header;
}
justify-self / align-self
单个元素对齐方式
四、Flex vs Grid 怎么选？（实战）
| 场景 | 推荐 |
|---|---|
| 一行按钮 / 列表 | Flex |
| 水平 + 垂直居中 | Flex |
| 页面整体布局 | Grid |
| 表格 / 卡片墙 | Grid |
| 不规则区域 | Grid |
五、最容易踩的坑（面试常问）
❌ 1. Flex 里用错 align-content
只有多行才生效
❌ 2. Grid 里乱用 fr
grid-template-columns: 1fr 100px;
👉 fr 是“剩余空间”，不是比例
❌ 3. order 改顺序影响可访问性
DOM 顺序没变，读屏会乱。
六、记忆口诀（超好用）
Flex：
主轴靠 justify，交叉靠 align
Grid：
先画表，再填格
七、面试一句话总结（可直接说）
Flex 是一维布局模型，适合处理一行或一列的排列和对齐；
Grid 是二维布局模型，可以同时控制行和列，更适合整体页面布局。
