flex-basis非auto时width完全不参与主轴计算，浏览器直接忽略width；仅当flex-basis: auto时，width才作为内容尺寸后的fallback参考，且受min/max-width限制。
flex-basis 非 auto 时 width 完全不参与主轴计算
浏览器在 Flex 布局中对子项主轴尺寸的计算流程，压根不读取 width（或 height）——只要 flex-basis 不是 auto，width 就被跳过。这不是“覆盖”，是直接忽略。
常见触发场景：
-
width: 200px; flex: 1;→ 等价于flex: 1 1 0%，flex-basis: 0%生效，width彻底无效 -
flex-basis: 120px; width: 300px;→ 初始主轴尺寸就是 120px，width在 computed styles 里可能还显示着，但 layout 中零贡献 -
flex-basis: 100%; width: 50px;→ 父宽 400px，子项起点就是 400px，后续再加 padding 或 border 很容易溢出
flex-basis: auto 时 width 才可能 fallback，但不等于 width
flex-basis: auto 是内容感知的三级回退逻辑，不是简单取 width 值：
- 第一步：看内容固有尺寸（比如图片原始宽、未折行长文本的
max-content宽度） - 第二步：fallback 到
width（水平主轴）或height（垂直主轴） - 第三步：受
min-width/max-width（或对应高度）限制
所以：width: 150px; flex-basis: auto; + 两个汉字 → 实际宽度可能只有 48px；而 flex-basis: 150px; + 空内容 → 强制占位 150px，哪怕没内容也维持这个起点。
立即学习“前端免费学习笔记（深入）”；
flex-direction 改变时，flex-basis 控制的维度跟着变
flex-basis 永远绑定主轴，不是固定管 width 或 height：
-
flex-direction: row（默认）→ 主轴水平 →flex-basis替代width，height是交叉轴 -
flex-direction: column→ 主轴垂直 →flex-basis替代height，此时width: 200px只约束横向显示，不参与主轴空间分配
响应式中典型坑：@media (max-width: 768px) { flex-direction: column; } 后还留着 flex-basis: 200px; → 这个 200px 被当成了高度基准，但父容器 height: auto，结果子项高度塌缩或内容溢出。想让 column 下子项“占满宽度”，该用 width: 100%（交叉轴），而不是改 flex-basis。
flex 缩写会悄悄重置 flex-basis，绕过 width 意图
所有常见 flex 缩写都隐式设了 flex-basis，从而绕过你写的 width：
-
flex: 1→flex: 1 1 0%，flex-basis: 0%生效，width失效 -
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。
最易被忽略的一点：当你在调试时看到 DevTools 的 Styles 面板里 width 还亮着，不代表它起作用——切到 Computed 面板看 width 对应的 layout 尺寸，如果和 flex-basis 冲突且后者非 auto，那 width 就只是个摆设。
