flex-basis非auto时width完全不参与主轴尺寸计算，浏览器直接跳过width；仅当flex-basis: auto时，width才作为内容自然宽度之后的fallback依据。
flex-basis 非 auto 时 width 完全不参与计算
浏览器在 Flex 布局中对子元素主轴尺寸的计算，根本不管 width —— 只要 flex-basis 不是 auto，width 就被跳过。不是“覆盖”，是压根不读取。你在 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就必然溢出
flex-basis: auto 时 width 才可能 fallback
flex-basis: auto（默认值）不是“等于 width”，而是三级回退逻辑：先看内容自然宽度（比如图片固有宽、未折行长文本），再 fallback 到 width 或 height（取决于 flex-direction），最后受 min-width/max-width 限制。
所以即使写了 width: 200px，只要里面有个 https://very-long-url-with-no-dashes.com，实际宽度仍可能是 320px —— 这不是 width 失效，是规范要求它让位。
想靠 width 控制尺寸，必须同时满足：
- 没写
flex-basis（或显式设为auto） -
flex-grow和flex-shrink都为0（即flex: none或flex: 0 0 auto） - 内容本身不撑开（否则仍会优先取内容宽）
flex 缩写会悄悄改掉 width 的意图
flex: 1、flex: 2、flex: auto 这些简写，背后都隐式设置了 flex-basis，从而绕过 width：
-
flex: 1→flex: 1 1 0% -
flex: auto→flex: 1 1 auto（此时width有机会 fallback，但还要跟内容比大小） -
flex: 0 1 200px→flex-basis: 200px显式生效，width可删可留，仅作注释用
真正想锁死尺寸又允许收缩？别依赖 width，直接写 flex: 0 1 200px；想完全禁止伸缩？用 flex: 0 0 200px。
box-sizing: border-box 救不了 width 失效
box-sizing: border-box 只解决 padding 和 border 是否计入 width 的问题，跟 flex-basis 和 width 的优先级冲突无关。它改变的是 “width 怎么解释”，不是 “width 是否参与 Flex 计算”。
典型误用：.item { width: 200px; padding: 16px; box-sizing: border-box; } 放进 Flex 容器里，依然会被 flex-basis: 100% 覆盖 —— 更糟的是，在 IE10/11 中，这种组合还可能触发 Flexbug #7，导致意外溢出。
正确做法：
- 统一用
flex-basis控制主轴尺寸 -
box-sizing: border-box仅用于确保padding/border不撑破该尺寸 - 需要兼容旧 IE？改用
-ms-flex: 0 0 200px;+width: 200px;+box-sizing: border-box;
最常被忽略的一点：flex-basis 的值（比如 100% 或 0）是静态计算的，它不随后续 flex-shrink 动态调整 —— 单个 flex-basis: 100% 在小屏下卡死整行，收缩机制根本不会启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
