flex-basis: 50%相对于父容器主轴已计算尺寸，width: 50%相对于父元素content box宽度；flex-basis非auto时width被完全跳过，两者参照系不同且互不参与对方计算。
因为 flex-basis 的百分比是相对于父容器**当前计算出的主轴尺寸**，而 width 的百分比是相对于父容器**内容区（content box）宽度**；两者参照系不同，且 flex-basis 在非 auto 时会直接跳过 width 的解析。
flex-basis: 50% 和 width: 50% 的参照对象完全不同
flex-basis: 50% 的“50%”是相对于父容器在 flex 主轴方向上**已确定的尺寸**（比如 display: flex 容器的 computed width），这个值可能受 max-width、padding、浮动塌陷或 inline-flex 行为影响，甚至可能是 auto（即 0）；而 width: 50% 的参照始终是父元素 content box 的宽度，只要父元素有 layout 就能算——但若父元素本身没宽（如未设 width 或被浮动撑不开），它也会失效。
- 常见错误：给
display: inline-flex父容器设flex-basis: 50%，结果子项宽度为 0 —— 因为 inline-flex 容器 computed width 是 auto，50% × 0 = 0 - 对比现象：
width: 50%在同样 inline-flex 父级下可能显示为“正常”，只是因浏览器 fallback 到内容宽度，而非真按 50% 计算 - 响应式断点中只改
width却不检查父容器 computed width，容易误判“百分比没生效”
flex-basis 非 auto 时 width 被完全跳过
只要 flex-basis 不是 auto（包括 50%、200px、0），浏览器在主轴尺寸计算阶段就不再读取 width 属性，width: 50% 和 width: 200px 都不会参与布局。这不是覆盖，是彻底忽略。
- 典型误写：
.item { width: 50%; flex-basis: 50%; }→ 实际只认flex-basis: 50%，width在 computed 面板里显示为auto - 更隐蔽的问题：
flex: 1 1 50%中的50%就是flex-basis，此时width同样无效 - DevTools 的 Styles 面板能看到
width声明，但 Computed 面板里它的值对 layout 没任何贡献
IE10/11 和旧 Android WebView 对百分比 flex-basis 的支持极差
IE10/11 完全忽略 flex-basis，哪怕写了 flex-basis: 50% 也当没看见；旧版 Android WebView（4.4–5.1）解析 flex-basis: 50% 会出错，常导致子项宽度为 0 或溢出。
- IE 下唯一可靠方案：
-ms-flex: 0 0 24.9%; flex: 0 0 24.9%; width: 24.9%;（注意用小数，避免整除触发 bug） - Android 4.4–5.1 推荐用
flex-basis: 25vw或flex-basis: 200px替代百分比 - 如果必须用百分比，得加兜底：
width: 50%; min-width: 0;并确保父容器有明确width
flex-direction 改变时，flex-basis 的百分比含义会切换
flex-basis: 50% 在 flex-direction: row 时是占父容器宽度的 50%，但在 flex-direction: column 时就是占父容器高度的 50% —— 此时 width: 50% 只控制交叉轴（即高度方向上的“宽度”），和主轴无关。
- 媒体查询中切
flex-direction却没同步改flex-basis单位，极易引发高度塌缩或横向溢出 - 例如：
@media (max-width: 768px) { .item { flex-direction: column; flex-basis: 50%; } }→ 若父容器高度只有 200px，子项 height 就变成 100px，但你本意可能是“每项占一行” - 安全做法：column 方向下优先用固定值（
flex-basis: 120px）或flex: 0 0 auto+width控制
真正可控的写法不是纠结 width 和 flex-basis 谁该用百分比，而是明确：百分比值是否依赖父容器主轴尺寸已知、是否跨浏览器一致、是否随 flex-direction 动态变化——这三个问题中任一不确定，就该换用 px、vw 或 flex: 0 0 auto + width 组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
