衡水学校网站建设门户网站建设 简报

下面是整理的一个【🎯 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;

---