flex-basis非auto时width完全被忽略，此时width仅显示在开发者工具中但不影响布局；flex-basis:auto则回退取width或内容尺寸，width看似生效实为后备来源。
flex-basis 非 auto 时 width 完全被忽略
只要子项显式设置了 flex-basis: 200px、flex-basis: 50% 或任何非 auto 值，width 就不参与主轴尺寸计算。开发者工具里 width 的 computed 值依然显示，但它对布局零影响。
常见踩坑点：
-
width: 200px; flex: 1;→ 等价于flex: 1 1 0%，width失效，元素被拉伸 -
width: 150px; flex-basis: 100px;→ 最终基准是100px，不是150px - IE10/11 会直接无视
flex-basis，必须加-ms-flex: 0 0 200px+width: 200px双声明
想让 width 生效？必须设 flex-basis: auto
flex-basis: auto 是默认值，它本身不取固定值，而是回退查找：先看 width（主轴为 row 时）或 height（主轴为 column 时），查不到再看内容尺寸。所以这时 width “看似生效”，其实是被 flex-basis 当作后备来源读取的。
但要注意：
-
width: 150px; flex: 1 1 auto;不等于“固定宽”，而是“以 150px 为起点再拉伸”，内容变多仍会撑开 - 内容本身有宽度（如长文本、图片）时，
flex-basis: auto可能跳过width，直接按内容算 - 别依赖
width做响应式控制——媒体查询里只改width没用，必须同步更新flex-basis或整个flex值
固定宽度别写 width，用 flex: 0 0
真正锁死尺寸、禁止伸缩的写法是 flex: 0 0 200px，它展开为 flex-grow: 0; flex-shrink: 0; flex-basis: 200px。此时 width 可删可留，留着仅作注释用途。
对比其他写法：
-
flex: none→ 等价于flex: 0 0 auto，width才可能起作用，适合图标、开关等装饰性元素 -
flex: 0 1 200px→ 允许收缩但不放大，比单纯写width更可控 -
flex-basis: 0且内容为空 → 元素可能视觉“消失”，因为被压缩到min-width: auto的最小值；解法是加min-width: 0
box-sizing: border-box 不能解决 width 失效问题
box-sizing: border-box 只决定 padding 和 border 是否计入 width，和 flex-basis 与 width 的优先级无关。它不影响“width 是否参与 flex 计算”，只影响“width 值本身怎么解释”。
典型误用：
-
.item { width: 200px; padding: 16px; box-sizing: border-box; }放在 flex 容器里，依然被flex-basis覆盖 - 更危险的是：
flex-basis: 100%+box-sizing: border-box在 IE 中可能触发 Flexbug #7，导致溢出 - 全局预防建议：
* { box-sizing: border-box; }，避免 content-box 下width + padding意外超限
真正难调试的，是浏览器把 flex-basis: auto 的回退逻辑藏得太深——它既查 width，又查 min-width，还看 box-sizing 和 padding 是否计入，稍不注意就变成“看着写了，其实没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
