flex-basis: 0% 表示按父容器主轴尺寸的0%计算初始尺寸（结果为0但类型为百分比），需父容器主轴有明确尺寸才能生效，其作用是清空内容兜底宽度、强制从零起点按flex-grow比例严格均分空间。
flex-basis: 0% 不是“设成 0 像素”，而是“按父容器主轴尺寸的 0% 计算”
它实际等价于 flex-basis: 0%，不是 0px 或 0。浏览器会尝试用父容器当前主轴尺寸（比如 width）乘以 0% 得到初始占位值——结果确实是 0，但类型是百分比，参与计算的方式和单位值不同。
常见错误现象：在 flex-direction: column 容器里写 flex-basis: 0%，却发现没生效；或者父容器 width: auto 时，0% 直接退化为 auto ——因为缺少计算基准，浏览器无法解析百分比。
- 必须确保父容器在主轴方向有明确尺寸（如
width或max-width），0%才能稳定产出 0 - 在
column方向，0%依赖的是父容器的height，不是width，容易误判 -
0%和0px在 IE11、旧 Safari 中解析行为不一致，生产环境更推荐用0（无单位）
flex-basis: 0% 的真实作用是“清空内容兜底宽度，强制从零开始分配”
它让元素放弃自身内容宽度、width 或 min-width 的默认保护，进入纯比例分配流程。这不是 bug，是设计选择——你要的是“严格均分”，而不是“内容自适应”。
典型场景：三列导航菜单，每项文字长度差异大，但要求视觉等宽；或卡片网格中所有卡片必须严格占满容器宽度，不管图标大小或标题长短。
- 搭配
flex-grow: 1才有意义，否则元素会坍缩不可见 - 必须加
min-width: 0，否则浏览器默认的min-width: auto会阻止压缩，导致0%失效 - 如果子项含长文本或图片，
white-space: nowrap或overflow: hidden要手动加，否则内容仍可能撑开
flex-basis: 0% 和 flex-basis: auto 的空间分配逻辑完全不同
auto 是动态取值：先看 width/height，再查 min-width/min-height，最后 fallback 到内容固有尺寸；0% 是静态起点：直接设为 0，后续所有 flex-grow 都基于这个零起点拉伸。
假设容器宽 600px，两个子项：A 内容宽 320px，B 宽 100px：
- 用
flex: 1 1 auto→ 初始占位 ≈ 420px → 剩余 180px 分配 → 最终 A≈410px，B≈190px - 用
flex: 1 1 0%→ 初始占位 = 0 → 剩余 600px 全部分配 → A 和 B 各得 300px，A 文字被截断，B 留白
差的不是数值，是计算起点。写错 flex-basis，等于整个 flex 分配都在错误的基线上运行。
什么时候该坚持用 0%，而不是 auto 或 0px
只有一种情况值得用 0%：你明确要求子项**完全无视内容尺寸，严格按 grow 比例瓜分空间**，且已控制好内容溢出行为（如截断、隐藏、换行限制）。
其他多数场景，flex: auto（即 flex: 1 1 auto）更安全；若追求彻底可控，直接用 flex: 1 1 0（无单位 0），避免百分比在无尺寸父容器下的降级风险。
最容易被忽略的一点：flex 分配不是“设完 basis 就结束”，而是“basis 定起点 → grow/shrink 做加减”。起点错了，后面全错。调试时别只盯着最终 width，先看 DevTools 里 flex-basis 计算值是不是你预期的类型和数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
