| 写法 | grow | shrink | basis | 用途 |
|---|---|---|---|---|
flex: 1 |
1 | 1 | 0 | 平分宽度的王者 |
flex: auto |
1 | 1 | auto | 内容决定宽度，又能伸缩 |
flex: none |
0 | 0 | auto | 不伸不缩，固定内容宽度 |
flex: 0 0 200px |
0 | 0 | 200px | 固定宽度的网格布局 |
flex: 2 |
2 | 1 | 0 | 占双倍宽度 |
flex: 1 0 auto |
1 | 0 | auto | 可放大但不可缩小 |
🎯 flex 是一个简写属性（三项合一）
flex 等价于：
即：
-
grow：可以放大吗？（比例）
-
shrink：可以缩小吗？（比例）
-
basis：初始宽度是多少？
1️⃣ flex-grow（放大）
表示当父容器有剩余空间时，子元素按比例扩大。
例：
-
flex-grow: 1→ 占 1 份 -
flex-grow: 2→ 占 2 份 -
flex-grow: 0→ 不放大
2️⃣ flex-shrink（收缩）
表示当空间不足时，子元素是否被允许压缩。
-
1→ 可以压缩 -
0→ 不能压缩，会强撑布局 -
默认是
1
⚠ 很多文本省略问题就是因为 shrink 允许，但 min-width 不允许。
3️⃣ flex-basis（初始宽度）
表示“flex 子项参与分布前的基础宽度”。
例如：
和
区别很大：
-
auto→ 根据内容大小决定初始宽度 -
0→ 初始宽度为 0，由 grow 完全决定分配 -
xx%→ 固定为百分比宽度
flex: 1 默认就是 flex-basis:0，所以能平分宽度。
✨ 常用简写（必须掌握）
✔ flex: 1
等价于：
解释：
-
grow = 1：可以放大
-
shrink = 1：可以缩小
-
basis = 0：初始宽度 0 → 三等分最方便
适用于：
让多个子项自动平分宽度。
✔ flex: none
等价于：
表示：
-
不放大、不收缩、宽度为内容宽度
-
和
display:inline-block行为接近
✔ flex: auto
等价于：
表示：
-
可放大，可缩小
-
初始宽度根据内容决定
更适合“内容驱动”的布局。
✔ 固定宽度但可换行
适用于：
每个 item 固定为 200px，超过则换行。