flex-basis百分比失效主因是父容器缺乏主轴基准尺寸：row时需width、column时需height；若父容器宽高由内容撑开或受absolute/fixed/transform影响，百分比退化为auto。
flex-basis百分比计算失效的常见原因
flex-basis: 50%没生效，大概率不是写错了，而是父容器压根没提供可计算的基准尺寸。浏览器对百分比的解析依赖明确的主轴尺寸——比如flex-direction: row时需要父容器有width，column时则需height。若父容器宽度由内容撑开、或被position: absolute切断包含块上下文，百分比就会退化为auto。
典型现象：flex-basis: 20%写了，但子项要么挤成一排、要么换行错乱。这时打开 DevTools 查看 computed style，如果看到实际值是auto而非20%，就确认是基准缺失。
- 检查父容器是否显式设置了
width（横向布局）或height（纵向布局） - 确认父容器
display确实是flex，且flex-direction与你设的百分比方向一致 - 排查祖先节点是否有
transform、position: absolute/fixed，它们会破坏包含块宽度传递
flex-basis百分比 vs width百分比的行为差异
width: 50%和flex-basis: 50%视觉上可能一样，但底层逻辑完全不同：前者是静态尺寸声明，后者是 flex 分配流程的起点。一旦发生空间不足或启用flex-shrink: 1（默认），差异立刻暴露。
flex-basis: 50%在有剩余空间时仍会参与flex-grow再分配；若设了flex-shrink: 1，它还可能被压缩——而width: 50%只会溢出或触发滚动条。
- 想严格锁定比例且禁用收缩，用
flex: 0 0 50%（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50%） - 想让子项随容器缩放又保持比例，优先用
flex-grow配合flex-basis: 0，而非依赖百分比 - 移动端真机调试时，
flex-basis: calc(50% - 8px)在旧版 iOS Safari 中支持不稳定，建议拆解为flex-basis: 50%+margin
IE10/11 和旧 WebView 的兼容陷阱
IE10/11 对flex-basis的解析非常脆弱：百分比值必须带单位（0%有效，0会被忽略），且必须配合-ms-flex前缀和display: -ms-flexbox声明。更麻烦的是，flex-basis: auto在某些组合（如flex-wrap: wrap）下直接失效，导致列宽归零。
- IE 兼容写法必须写全：
flex: 0 0 33.33%+-ms-flex: 0 0 33.33% - 父容器加
display: -ms-flexbox，否则子项不识别-ms-flex - 所有子项强制
box-sizing: border-box，否则padding/border会让百分比计算失准 - 避免
flex-basis: calc()，IE11 会直接丢弃整条声明
嵌套 Flex 容器中百分比的计算基准
flex-basis: 50%永远只相对于**直接父容器的主轴尺寸**，而不是最外层容器或视口。三层嵌套时，内层子项的百分比是按中间层容器的宽度算的，跟外层高度无关——这点常被忽略，导致响应式断点里比例突然崩坏。
例如：外层flex-direction: column，中间层row，内层又是column，那么内层子项的flex-basis: 50%是按中间层宽度计算的，哪怕外层设置了width: 100vw也无影响。
- 调试时不要只看外层容器样式，要逐级检查每一层父容器的
width/height是否稳定 - 嵌套过深时，建议用
min-width+flex: 1替代百分比，减少对祖先尺寸的依赖 - 媒体查询中切换
flex-direction时，同步检查flex-basis单位是否合理——%在垂直主轴下需父容器有明确height，否则无效
实际项目里最容易被忽略的，是父容器宽度的“隐性丢失”：比如一个div没设width，又没继承自 body，它的宽度就是内容撑开的，此时任何子项的flex-basis: 50%都只是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
