flex-basis 优先于 width 控制主轴尺寸，非 auto 时 width 完全不参与计算；flex-direction 改变时 flex-basis 对应维度随之切换；width 仅在 flex-basis: auto 且 flex-grow/shrink 为 0 且内容不溢出时生效。
因为 flex-basis 是 Flex 布局空间分配的起点，浏览器在计算主轴尺寸时根本不会读取 width —— 只要 flex-basis 不是 auto，width 就被跳过，不是“覆盖”，是压根不参与计算。
flex-basis 非 auto 时 width 彻底失效
Flex 布局引擎在分配空间前，第一步就是确定每个子项的“初始主轴尺寸”，这个值只来自 flex-basis。一旦它被设为具体值（如 200px、30%、0），width 就连进入计算流程的机会都没有。
-
width: 200px; flex-basis: 150px;→ 实际主轴尺寸是150px -
width: 100%; flex: 1;→flex: 1展开为flex: 1 1 0%，width完全无效 - 开发者工具里
width仍显示在 Styles 面板，但 Computed 面板中 layout 相关字段（如width或height）已不受其影响
flex-direction 改变时，flex-basis 控制的维度跟着变
flex-basis 从不绑定 width 或 height 这两个属性名，它只对齐当前主轴。主轴一换，它接管的就不是宽度了。
-
flex-direction: row（默认）→flex-basis控制水平尺寸，覆盖width -
flex-direction: column→ 主轴变为垂直方向，flex-basis控制高度，此时覆盖的是height，而width变成交叉轴约束，不影响 flex 分配 - 响应式中用媒体查询切换
flex-direction却保留flex-basis: 200px，结果在column下变成“固定高度 200px”，若父容器没设height，内容可能被裁剪或溢出
想让 width 生效，必须满足三个条件
width 在 Flex 容器里不是完全没用，但它只在非常特定的组合下才作为 fallback 起作用 —— 而且这个 fallback 还要和内容比大小。
立即学习“前端免费学习笔记（深入）”；
- 子项未声明
flex-basis，或显式写了flex-basis: auto -
flex-grow和flex-shrink都为0（即flex: 0 0 auto或flex: none） - 内容自然宽度 ≤
width值；否则内容撑开后，width依然形同虚设（比如width: 100px但里面有个长 URL） - 别指望
box-sizing: border-box能“救”width—— 它只影响 padding/border 是否计入width，不改变flex-basis的优先级逻辑
最容易被忽略的一点是：flex-basis: 0 并不等于“按 width 来”，它真就是从零开始分配；如果内容有固有尺寸（比如图片、长文本），还得加 min-width: 0 才能压制，默认的 min-width: auto 会把它撑开。
