flex-basis能覆盖width，因其是flex布局空间分配的第一步，优先级高于width；浏览器在flex容器中优先采用flex-basis计算主轴初始尺寸，仅当flex-basis为auto时才fallback到width。
因为 flex-basis 是 Flex 布局空间分配的第一步，而 width 是普通盒模型属性；浏览器在 flex 容器中会直接跳过 width 的常规计算，优先用 flex-basis 算主轴初始尺寸。
flex-basis 为什么能覆盖 width
这不是 bug，是规范行为：flex-basis 属于 flex 项目的“空间分配起点”，它在布局流程中比 width 更早介入。只要 flex-basis 不是 auto，浏览器就无视 width 值，哪怕它是 200px 或 100%。
-
flex: 1展开为flex: 1 1 0%→flex-basis: 0%生效，width彻底失效 -
flex-basis: 150px+width: 300px→ 实际宽度是150px -
flex-basis: auto时才 fallback 到width（或内容固有尺寸）
width 在 flex 容器里还有没有用
有，但只在特定条件下起作用：
- 子项没设
flex-basis，且没写flex简写（即保持默认flex: 0 1 auto）→width会被当作flex-basis: auto的 fallback - 子项显式设
flex-basis: auto→width参与计算，但受内容影响（比如文字短，实际宽远小于width值） - 子项设
flex: none或flex: 0 0 auto→width能生效，且不被拉伸压缩
注意：box-sizing: border-box 不改变这个逻辑，它只影响 padding/border 是否计入 width，和 flex-basis 优先级无关。
flex-direction 改变时 width 和 flex-basis 的关系怎么变
flex-basis 不固定管 width，它跟着主轴走：
-
flex-direction: row（默认）→flex-basis控制水平尺寸，覆盖width -
flex-direction: column→flex-basis控制垂直尺寸，覆盖height；此时width变成交叉轴约束，不影响 flex 分配 - 响应式切换方向时，如果还留着
flex-basis: 200px，在column下它就成了“初始高度”，可能造成高度塌缩或溢出
IE10/11 兼容时的特殊处理
IE 对 flex-basis 支持不一致，尤其和 box-sizing 混用时容易出错（Flexbug #7）：
- 放弃
flex-basis，改用-ms-flex: 0 0 200px - 同时保留
width: 200px和box-sizing: border-box作为降级 - 避免在 IE 中对 flex 项设
box-sizing: border-box+flex-basis: 100%组合
真正容易被忽略的点是：flex-basis 的单位（px/%/em）在不同主轴方向下含义不同，但它本身从不读取 width 的值——哪怕你写了 width: 100%，只要 flex-basis: 200px 存在，它就按 200px 算，不管父容器多宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
