下面是整理的一个【🎯 Flex 概念图 + 使用场景速查表】，适合初学到进阶理解弹性布局。
🧭 Flex 概念图：弹性布局一览
Flex Container (父容器)
┌────────────────────────────┐
│ display: flex │
│ │
│ ┌───────┐ ┌───────┐ ┌───────┐
│ │ item1 │ │ item2 │ │ item3 │ ← 子项：flex items
│ └───────┘ └───────┘ └───────┘
└────────────────────────────┘
✅ 父容器的常用属性：
| 属性 | 作用 |
|---|---|
| display: flex | 启用弹性布局 |
| flex-direction | 主轴方向（横 row / 竖 column） |
| justify-content | 主轴对齐方式 |
| align-items | 交叉轴对齐方式 |
| gap | 子项之间的间距 |
| flex-wrap | 是否换行 |
✅ 子项的常用属性：
| 属性 | 作用 |
|---|---|
| flex-grow | 剩余空间时，如何放大 |
| flex-shrink | 空间不足时，如何收缩 |
| flex-basis | 初始尺寸（可视作宽度/高度基准） |
| flex | grow shrink basis 的简写 |
| align-self | 单独对齐某个子项（覆盖父容器的设置） |
⚡ 使用场景速查表：
| 目标场景 | 推荐设置 |
|---|---|
| 横向平铺菜单 | display: flex; flex-direction: row; |
| 垂直列表 | flex-direction: column; |
| 子项占据剩余空间（可拉伸） | flex-grow: 1; |
| 固定宽度子项不拉伸 | flex: 0 0 auto; |
| 两边对齐，中间自动延展 | 中间项设置 flex-grow: 1; |
| 居中对齐所有子项 | justify-content: center; align-items: center; |
| 自动换行（如卡片布局） | flex-wrap: wrap; |
