flex-basis 不替代 width，而是接管主轴初始尺寸计算；非 auto 时 width 完全不参与主轴计算，仅作 fallback 或交叉轴约束；推荐用 flex: 0 0 200px 锁定固定尺寸。
不能直接“替代”，flex-basis 本就不为替代 width 而存在；它在 flex 布局中接管主轴初始尺寸的计算权，width 则退为 fallback 或交叉轴约束。
flex-basis 非 auto 时 width 完全不参与主轴计算
只要子项设置了 flex-basis: 200px、flex-basis: 50% 或任何非 auto 值，浏览器就跳过 width 的主轴尺寸逻辑，哪怕你同时写了 width: 300px，它也只当注释看。
- 常见误判：
width: 200px; flex: 1;→ 实际等价于flex: 1 1 0%，flex-basis: 0%生效，width彻底失效 - IE10/11 不支持
flex-basis，必须配-ms-flex: 0 0 200px+ 显式width: 200px双声明 -
flex-direction: column下，flex-basis: 200px控制的是高度，此时width变成交叉轴约束，和主轴分配无关
想让 width “看起来生效”，必须设 flex-basis: auto
flex-basis: auto 是默认值，但它不是简单读取 width，而是按顺序比对：内容自然宽度（如图片原始宽、长文本撑开宽度）→ width（row 方向）或 height（column 方向）→ 取较大者作为起点。
-
width: 150px; flex-basis: auto;在内容只有两个字时，实际宽度可能远小于 150px -
width: 50px; flex-basis: auto;但里面有个长 URL，最终宽度仍被内容撑开到 220px - 响应式中只改
width不同步更新flex-basis，媒体查询会失效
真正锁死尺寸的写法不是 width，而是 flex: 0 0 <value>
固定尺寸、禁止伸缩的可靠方式是用 flex 简写明确切断 grow/shrink，并把基准值写死：
立即学习“前端免费学习笔记（深入）”；
/* 推荐：尺寸确定、不拉伸不收缩 */
.item {
flex: 0 0 200px;
}
<p>/<em> 等价于 </em>/
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 200px;
}-
flex: none等价于flex: 0 0 auto，此时width才可能起作用，适合图标、开关等装饰性元素 -
flex: 0 1 200px允许收缩但不放大，比单纯写width更可控 - 若内容为空且
flex-basis: 0，需加min-width: 0防止被min-width: auto撑开
flex-direction 切换时 flex-basis 单位含义会变
flex-basis 不绑定 width 或 height 属性名，它永远对齐主轴。方向一变，语义立刻翻转：
-
flex-direction: row→flex-basis: 100px= 初始宽度 -
flex-direction: column→flex-basis: 100px= 初始高度，此时width对主轴无影响 - 响应式中用
@media切换flex-direction，却保留flex-basis: 200px，很可能在 column 下造成高度塌缩（父容器没设height）或溢出 -
flex-basis: 100%在 column 下是相对于父容器height计算，不是width
最易被忽略的是：flex-basis 的单位（px/%/em）本身不读取 width 的值——哪怕你写了 width: 100%，只要 flex-basis: 200px 存在，它就按 200px 算，不管父容器多宽或多窄。
