flex-basis 非 auto 时 width 被完全忽略，仅当 flex-basis: auto 时 width 才作为后备尺寸被读取；flex: 1 等简写会隐式设 flex-basis 为 0% 或 auto，导致 width 失效。
flex-basis 和 width 冲突时，不是“谁写在后面谁赢”，而是浏览器按明确的优先级规则直接忽略 width —— 但这个规则只在 flex-basis 不为 auto 时生效。
flex-basis 非 auto 时，width 被完全忽略
只要子项显式设置了 flex-basis: 200px、flex-basis: 33% 或任何具体值（非 auto），width 就不会参与主轴尺寸计算。哪怕你写了 width: 100px，开发者工具的 Computed 面板里 width 值仍显示，但它对布局无实际影响。
- 常见错误：给侧边栏写
width: 240px; flex: 1;→ 实际等价于flex: 1 1 0%，width彻底失效，侧边栏被拉伸填满 - 正确做法：固定宽度用
flex: 0 0 240px，此时flex-basis: 240px生效，width可删可留（留着仅作文档提示） - 注意：IE10/11 会直接无视
flex-basis，所以必须配合-ms-flex: 0 0 240px+width: 240px双声明
flex-basis: auto 时，width 才可能“复活”
flex-basis: auto 是默认值，它不直接取值，而是去查 width（或 height，取决于主轴方向）→ 查不到再看内容尺寸。所以这时 width 看似“起作用”，其实只是被 flex-basis 当作了后备来源。
- 典型陷阱：写
width: 150px; flex: 1 1 auto;→ 表面看是“固定宽+可拉伸”，实际是“以 150px 为起点再拉伸”，内容变多时仍会撑开 - 想真正锁定初始尺寸又允许收缩？改用
flex: 0 1 150px，这样flex-basis显式为 150px，width不再干扰 - 内容本身有宽度（如长文本、图片）时，
flex-basis: auto会优先按内容算，width可能被跳过 —— 这就是为什么有时删了width，元素宽度却没变
flex: 1 类简写会悄悄覆盖 width
flex: 1 展开后是 flex: 1 1 0%，flex-basis 变成 0%，width 失效；flex: auto 展开为 flex: 1 1 auto，width 只在 flex-basis 回退阶段起作用，稳定性差。
- 想让某项“占剩余空间但不挤压其他项”，别用
flex: 1，改用flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0） - 响应式中媒体查询里只改
width没用，必须同步更新flex-basis或整个flex值，否则断点后布局错乱 -
flex: none是安全兜底：它等价于flex: 0 0 auto，此时width会作为最终尺寸生效，适合图标、开关等纯装饰性元素
真正难调试的不是规则本身，而是浏览器把 flex-basis: auto 的回退逻辑藏得太深——它既查 width，又查 min-width，还看内容盒模型（box-sizing、padding 是否计入），稍不注意就变成“看着写了，其实没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
