为什么CSS3中的flex-basis属性会覆盖盒模型的width定义原理

首先抛出核心观点：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 计算，与父容器宽度无关。