flex-basis 是 flex 布局空间分配的第一步，width 仅为 fallback；布局三步链为：① 确定 flex-basis → ② 计算剩余空间 → ③ 按 flex-grow/shrink 再分配，width 不参与该流程。
因为 flex-basis 是 Flex 布局空间分配流程的第一步，width 只是 fallback；这不是浏览器实现差异，而是规范强制定义的计算顺序。
flex-basis 是空间分配的“起点”，width 不参与该流程
Flex 布局在主轴上分配空间时，有明确的三步计算链：① 确定每个项目的 flex-basis（初始尺寸）→ ② 计算剩余空间 → ③ 按 flex-grow/flex-shrink 再分配。width 完全不在这个链条里，它只在 flex-basis: auto 时被读取作为参考值，且仍受内容影响。
-
flex-basis: 120px→ 直接进入步骤①，width被跳过 -
flex-basis: auto→ 才去查width或内容宽度，但若内容是长英文不换行，最终尺寸仍可能远超width -
flex: 1→ 展开为flex: 1 1 0%，flex-basis: 0%生效，width彻底无效
width 在 flex 容器中只是“被动回退值”，不是布局指令
width 是通用盒模型属性，作用于普通文档流；而 flex-basis 是专为弹性布局设计的语义化入口。当父容器是 display: flex，子项的 width 就降级为“如果没设 flex-basis，就试试看这个值”，但它不保证生效：
- 写
width: 200px; flex-basis: 150px;→ 浏览器直接用 150px，200px 被忽略（连解析都省了） - 写
width: 200px;但没设flex-basis→ 实际行为等价于flex-basis: auto，仍可能被内容撑开（比如<span>verylongwordwithoutspaces</span>） - 想锁死尺寸？
flex: 0 0 200px比width: 200px更可靠，因为它同时禁用伸缩且显式设定了基准
响应式断点里改 flex-basis 行为可预测，改 width 往往失效
媒体查询中切换尺寸时，flex-basis 直接触发 flex 布局重排；而 width 只是静态样式，在 flex 容器中极易被 flex-shrink 压缩或被内容突破：
-
@media (max-width: 768px) { .item { flex-basis: 100%; } }→ 项目独占一行，flex-grow自动失效，结果确定 - 同样断点写
width: 100%→ 若父容器有flex-wrap: wrap且空间不足，该项目可能被压缩到 60% 甚至更小 - Android WebView 4.4–5.1 对
flex-basis: 50%解析不准，但flex-basis: 120px或flex-basis: 25vw稳定——说明 width 类型值（如 px/vw）比百分比更可控
真正容易被忽略的点是：flex-basis 不是“最大宽度”也不是“固定宽度”，它只是空间分配的起始点；后续是否拉伸、压缩、溢出，取决于 flex-grow、flex-shrink 和 min-width 的组合。只设 flex-basis 不设 min-width，小屏下文字仍可能撑破容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
