首先抛出核心观点：flex-basis 能够覆盖 width 并非浏览器缺陷，而是 CSS Flex 布局规范的有意设计。简而言之，flex-basis 是 Flex 容器中计算主轴尺寸的第一顺位属性，width 仅在 flex-basis 设为 auto 时才会被浏览器重新纳入考量。
接下来详细拆解。在普通块级格式上下文中，width 占据主导地位；然而一旦进入 Flex 容器，规则便发生转变。浏览器的布局流程如下：首先检查弹性项目是否设置了 flex-basis，只要该值不是 auto，便会直接以此作为初始主尺寸，即便同时声明了 width: 200px 或 width: 100% 也会被完全忽略。这并非 CSS 优先级的高下之争，而是计算时机的差异——flex-basis 在空间分配的第一步便介入计算，比 width 更早发挥作用。
flex-basis 为什么能覆盖 width
CSS 规范对此有明确说明：flex-basis 定义了弹性项目在主轴上的初始尺寸。只要该值不为 auto，浏览器就会全程忽略 width。以下是几种典型场景：
flex: 1展开后等价于flex: 1 1 0%，此时flex-basis: 0%生效，width彻底失效。- 同时设置
flex-basis: 150px与width: 300px，最终渲染宽度为 150px，300px 被完全覆盖。 - 只有当
flex-basis: auto时，浏览器才会回退到width（或内容的固有尺寸）进行后续计算。
width 在 flex 容器里还有没有用
在特定条件下，width 依然能够发挥作用，前提是 flex-basis 未主动拦截。具体场景如下：
- 子项未设置
flex-basis且未使用flex简写（默认值为flex: 0 1 auto），此时width作为flex-basis: auto的降级方案被采用。 - 子项显式声明
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-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 中对弹性项目使用
box-sizing: border-box+flex-basis: 100%的组合，该组合容易导致布局错误。
最后提一个容易被忽略的点：flex-basis 的单位（px、%、em）在不同主轴方向下含义不同，但它本身永远不会读取 width 的值——即使设置了 width: 100%，只要 flex-basis: 200px 存在，最终尺寸就始终按 200px 计算，与父容器宽度无关。
