flex-basis: 0%与auto本质不同：0%强制从0开始分配剩余空间，但依赖父容器主轴尺寸计算，缺失时回退为auto；auto则按width/height或内容固有尺寸确定基准后再分配剩余空间。
flex-basis: 0% 和 flex-basis: auto 渲染起点完全不同
两者根本不是“差不多”的取值，而是空间分配逻辑的分水岭：flex-basis: 0% 强制从 0 开始分配剩余空间，flex-basis: auto 先按内容或 width 算出一个基准尺寸，再处理剩余空间。浏览器不会因为写了 0% 就去“猜”父容器宽度——它真会尝试计算百分比，而一旦父容器主轴尺寸未定（比如 width: auto 的 flex 容器），这个计算就会失败，回退为 auto，导致行为不可控。
为什么写 0% 还是可能被当成 auto
常见于这些场景：
- 父容器没设明确
width或max-width，0%缺少计算基准，降级为auto - 在
flex-direction: column下误用0%（此时应看height，但多数人只关注 width） - Safari 旧版本对
0%解析不一致，尤其嵌套 flex 容器中 -
flex: 1看似简写，实际等价于flex: 1 1 0%，但 DevTools 显示的“已计算值”常是0px，容易误以为和0一样——其实0%是百分比类型，0是绝对长度，语义不同
什么时候该用 0，而不是 0%
要确保严格等分、彻底无视内容宽度，直接用 flex-basis: 0（无单位）：
-
flex: 1 1 0比flex: 1更明确，避免0%的解析歧义 - 配合
min-width: 0防止 Safari 对min-width: auto的特殊处理 - 在表格类布局、卡片网格、导航栏均分中，
0是更安全的选择 - 不要混用：
flex-basis: 0必须配flex-grow: 1才能撑开；否则元素会坍缩成不可见
auto 不是“随缘”，它有明确计算规则
flex-basis: auto 并非放任不管，而是有优先级的尺寸推导链：
- 若元素设置了
width（水平主轴）或height（垂直主轴），就取那个值 - 否则查
min-width/min-height，再 fallback 到内容固有尺寸（content） - 在
white-space: nowrap或table-layout: fixed容器里，auto可能算出异常大的基准宽，导致换行失效 - IE11 对
auto支持不完整，生产环境建议用flex: 1 1 max-content或加 polyfill
最易被忽略的是：flex 分配不是“先设宽再拉伸”，而是“先定基线，再按比例加减”。flex-basis 就是那条基线——写错它，后面所有 flex-grow 和 flex-shrink 都在错误的起点上运算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
