flex-basis是分配空间前的初始基准，非固定值；优先用0px而非0%，因0%在旧版safari中可能回退为auto导致布局错乱，且需配合min-width:0解除隐式最小尺寸限制。
flex-basis 不是“设了就固定”，它只是分配空间前的起点；真正起效必须配合 flex-grow 和容器剩余空间，且容易被 min-width: auto 拦截。
flex-basis 设成 0px 还是 0%？
优先用 0px，不是 0%。后者在旧版 Safari（≤15.4）中可能被解析为无效值，导致回退到 auto，进而按内容撑宽——这会让你的等分布局突然错乱。
-
0px是明确的绝对长度，所有现代浏览器行为一致 -
0%依赖父容器主轴尺寸计算，在 flex 容器未完成 layout 前可能无意义 - 若你用
flex: 1简写，它实际展开为flex: 1 1 0%，这就是 Safari 兼容隐患的来源
为什么写了 flex-basis: 0 却不收缩？
大概率是 min-width: auto 在作祟。现代浏览器（Chrome ≥84、Firefox ≥76、Safari ≥14.1）默认给 flex 项加了隐式最小尺寸保护，防止内容被压扁到看不见——但它会直接覆盖 flex-basis: 0 的意图。
- 横轴布局（
flex-direction: row）必须加min-width: 0 - 纵轴布局（
flex-direction: column）对应加min-height: 0 - 别只写
overflow: hidden，它不解除最小尺寸限制
flex-basis 和 width 冲突时谁生效？
flex-basis 优先级高于 width，但仅在 flex 容器内有效。一旦你删掉 display: flex，width 就立刻接管。
-
flex-basis: 200px+width: 300px→ 实际基准是 200px -
flex-basis: auto+width: 300px→ 基准退回到 300px（因为 auto 表示“用 width 或内容”） -
flex: 0 0 200px等价于显式设flex-basis: 200px且禁止伸缩，此时width完全无效
什么时候该用 flex 简写而不是单独设 flex-basis？
日常开发中，90% 场景应直接用 flex 简写，但必须清楚它暗藏的默认值：比如 flex: 1 隐含 flex-basis: 0%，而 flex: 200px 隐含 flex: 0 0 200px（不可伸缩）。
- 要等分剩余空间 → 用
flex: 1，但记得补min-width: 0 - 要固定宽度+不允许伸缩 → 用
flex: 0 0 200px，比单独写三行更安全 - 要内容自适应+可缩小 → 用
flex: 0 1 auto，此时flex-basis回退到内容宽度
最常被忽略的是：flex-basis 的“基准”只在 flex 分配阶段起一次作用，后续 resize 或内容变化不会触发重计算——它不像 width 那样响应式联动。所以别指望靠改文字长度来自动调整列宽，得靠 flex-grow 和容器宽度共同作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
