width在flex子项中“无效”不是bug，而是因flex-basis非auto时优先级更高，width被彻底忽略；仅当flex-basis: auto时，width才作为后备尺寸参与计算。
width 在 Flex 子项中“无效”，不是浏览器 bug，也不是写法错误，而是 flex-basis 优先级明确高于 width，且只要 flex-basis 不是 auto，width 就完全不参与主轴尺寸计算。
flex-basis 非 auto 时，width 被彻底忽略
Flex 布局规范规定：当子项显式设置了 flex-basis: 100px、flex-basis: 33% 或任何非 auto 值时，width 属性会被浏览器跳过——它甚至不会被读取，更谈不上“覆盖”或“冲突”。你在 DevTools 的 Styles 面板里还能看到 width: 200px，但 Computed 面板里它的值对布局毫无影响。
常见误操作：
- 写
width: 240px; flex: 1;→ 实际等价于flex: 1 1 0%，flex-basis: 0%生效，width彻底失效 - 写
width: 150px; flex-basis: 120px;→ 主轴初始尺寸就是120px，width不起作用 - 用
flex: auto（即flex: 1 1 auto）→flex-basis: auto会 fallback 到width，但还要跟内容自然宽度比大小，结果不稳定
flex-basis: auto 时，width 才可能“露头”
flex-basis: auto 是默认值，但它不是简单地“等于 width”。它的行为是三级回退：
- 先查内容自然宽度（比如一段长文本、一张图片的固有宽度）
- 查不到或内容太小，才 fallback 到
width（或height，取决于flex-direction） - 最终再受
min-width/max-width限制
所以即使写了 width: 200px，如果里面有个未折行的 URL，实际宽度仍可能是 320px。这不是 width 失效，而是 flex-basis: auto 按规则选择了更大的内容尺寸。
真正想锁定初始尺寸又允许收缩？别依赖 width，改用：flex: 0 1 200px —— 此时 flex-basis 显式为 200px，width 可删可留（仅作注释用途）。
flex: 1 类简写会悄悄干掉 width
flex: 1 展开后是 flex: 1 1 0%，flex-basis: 0% 直接接管；flex: 2 是 flex: 2 1 0%；flex: auto 是 flex: 1 1 auto。它们都隐式设定了 flex-basis，从而绕过 width。
安全写法：
- 固定宽 + 不伸缩 →
flex: 0 0 240px（推荐），width可删 - 占剩余空间但不挤压其他项 →
flex: 1 0 0（flex-basis: 0+flex-shrink: 0） - 纯装饰性元素（如图标）→
flex: none（等价于flex: 0 0 auto），此时width才真正生效
注意：flex: 0 0 auto 和 flex: none 是少数能让 width 稳定落地的组合。
兼容性陷阱：IE10/11 和旧 Safari 不认 flex-basis 百分比
在 IE10/11 中，flex-basis: 50% 基本被忽略，浏览器直接 fallback 到 width 或内容尺寸；Safari ≤12.1 对百分比解析也不一致。硬写 flex-basis: 50% + width: 200px 在这些浏览器里反而导致行为混乱。
实操建议：
- 必须兼容 IE？放弃
flex-basis百分比，改用-ms-flex: 0 0 240px+width: 240px+box-sizing: border-box - 子项数量固定（如两个侧边栏）→ 统一写
flex: 1，靠均分视觉上接近 50% - 要留间隙 → 用
flex-basis: calc(50% - 4px)，比纯百分比更可控 - 父容器是
inline-flex？先确认它有没有真实宽度 —— 没有width或内容撑开时，flex-basis: 50%就是0px
最常被忽略的一点：调试时只盯着子项，却没检查父容器 Computed 中的 width 是否是你以为的“全宽”。flex-basis 百分比没生效，90% 的原因不在子项本身，而在父容器没宽度、被 max-width 截断、或是 display: inline-flex 导致的隐式收缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
