flex-basis非auto时width完全不参与主轴计算，浏览器直接跳过width；仅当flex-basis: auto时，width才作为内容尺寸后的fallback参考，且受min/max-width限制。
flex-basis 非 auto 时 width 完全不参与主轴计算
浏览器在 Flex 布局中对主轴尺寸的计算流程是单向且严格的：先取 flex-basis，仅当它为 auto（或未声明）时，才回退到 width（height 在 flex-direction: column 下同理）。这不是“覆盖”，而是跳过读取——你在 DevTools 的 Computed 面板里能看到 width 值存在，但它对 layout 没有任何影响。
常见误写：
-
width: 200px; flex: 1;→ 等价于flex: 1 1 0%，flex-basis: 0%生效，width被忽略 -
width: 100%; flex-basis: 150px;→ 初始主轴尺寸就是150px，width: 100%形同注释 -
flex: 0 0 200px;→flex-basis: 200px显式生效，width可删可留，纯属冗余
flex-basis: auto 时 width 才可能 fallback，但受内容制约
flex-basis: auto 不等于 “读取 width”，而是一套三级回退逻辑：内容自然宽度（如图片固有宽、未折行长文本）→ width 或 height（依主轴方向）→ min-width/max-width 限制。所以即使写了 width: 120px，只要里面有个 https://very-long-url.com，最终宽度仍可能是 320px。
想让 width 实际起效，必须同时满足：
- 没设
flex-basis，或显式写成flex-basis: auto -
flex-grow: 0且flex-shrink: 0（即flex: none或flex: 0 0 auto） - 内容本身不撑开（否则仍优先取内容宽）
flex-direction 改变时，width 和 flex-basis 的作用轴会切换
flex-basis 始终绑定主轴，不认 width 或 height 这个名字：
-
flex-direction: row（默认）→flex-basis控制水平尺寸，覆盖width -
flex-direction: column→flex-basis控制垂直尺寸，覆盖height；此时width变成交叉轴约束，不影响主轴分配
响应式中若用媒体查询切换 flex-direction，却保留 flex-basis: 200px，在 column 下它就成了“固定高度 200px”，而父容器若没设 height，极易导致内容裁剪或溢出。
IE11 和 flex-basis: 100% 组合容易触发 Flexbug #7
IE10/11 对 flex-basis 解析不一致，尤其与 box-sizing: border-box 混用时：
-
flex-basis: 100%+padding+box-sizing: border-box→ 可能意外溢出（Flexbug #7） - 负值
flex-basis在 IE11 中被直接忽略，降级为width，行为不可控
兼容方案：对 IE 单独用 -ms-flex: 0 0 200px，并保留 width: 200px 和 box-sizing: border-box 作为降级兜底。
真正难处理的不是优先级规则本身，而是 flex-basis 在不同上下文中的语义漂移：它既是“初始尺寸”，又不是“最大宽度”；既依赖容器尺寸（百分比），又受内容反向影响（auto）；还随 flex-direction 动态切换作用轴。这些细节一旦混用，调试时就很难靠直觉定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
