flex-basis是主轴尺寸的真正控制者，width在Flex容器中多数失效；仅当flex-basis: auto且flex-shrink: 0、flex-grow: 0、内容不撑开时，width才可能作为fallback生效。
flex-basis 不能“替代”width来解决冲突——它本来就是主轴尺寸的真正控制者，而width在 flex 容器里多数时候根本没机会生效。
flex-basis 非 auto 时 width 完全不参与计算
浏览器在 Flex 布局中只看 flex-basis（除非它是 auto），width 属性会被跳过，连解析都省了。你在 DevTools 的 Styles 面板里看到 width: 200px，Computed 面板里它对 layout 没任何影响。
-
width: 200px; flex: 1;→ 实际等价于flex: 1 1 0%，flex-basis: 0%生效，width彻底失效 -
width: 150px; flex-basis: 120px;→ 最终基准尺寸就是120px，width被忽略 -
width: 100%; flex-basis: 100%;→ 父宽 400px，子项初始占满 400px；再加padding或border就必然溢出
想让 width “看起来生效”，必须切断 flex-shrink 并设 flex-basis: auto
只有当 flex-basis 是 auto（默认值）时，width 才作为 fallback 参与计算，但前提是内容不撑开它：
- 显式写
flex-basis: auto（或不写，保持默认） - 设
flex-shrink: 0，否则内容少时仍可能被压缩 - 确保
flex-grow: 0，否则剩余空间会拉伸它 - 内容本身不能比
width更宽（比如长 URL、未折行文本）
所以真正可控的写法是：flex: 0 0 auto; + width: 200px; —— 这里 width 才有机会成为最终尺寸依据。
立即学习“前端免费学习笔记（深入）”；
IE10/11 中 flex-basis 被完全忽略，width 是唯一兜底手段
IE10 和 IE11 渲染引擎压根不读取 flex-basis，哪怕你写了 flex-basis: 200px，它也当没看见。此时 width 反而成了实际生效的尺寸来源，但仅限于特定组合：
- 必须配合
flex: 0 0 auto或flex: none，否则flex: 1会让 IE 回退到width: auto - 要写两套：
-ms-flex: 0 0 200px;+flex: 0 0 200px;，缺一不可 - 额外加
width: 200px;是保险绳——只在-ms-flex解析异常时起作用
flex-direction 改变时，flex-basis 控制的维度跟着变
flex-basis 不固定管 width，而是根据主轴方向切换：水平主轴（row）时它接管 width，垂直主轴（column）时它接管 height。这点极易被忽略：
-
flex-direction: row;+flex-basis: 200px;→ 控制宽度 -
flex-direction: column;+flex-basis: 200px;→ 控制高度，此时width: 200px只约束交叉轴，不影响主轴分配 - 响应式中用媒体查询切
flex-direction却没同步改flex-basis单位（比如还留着flex-basis: 30%），可能导致高度塌缩或溢出
最危险的点在于：你以为在调宽度，其实已在悄悄改高度——尤其当父容器没设 height 时，flex-basis: 30% 在 column 下会变成 0。
