flex-basis 是 flex 布局主轴空间分配的第一步，width 不参与该流程，仅在 flex-basis: auto 时作为不可靠的 fallback 参考值；稳定控制尺寸应使用 flex: 0 0 200px。
flex-basis 不是“比 width 优先”，而是它根本不在同一计算流程里——width 在 flex 布局中压根不参与主轴空间分配。
flex-basis 是空间分配的第一步，width 不在流程中
Flex 布局的空间分配有明确三步链：flex-basis → 计算剩余空间 → flex-grow/flex-shrink 再分配。width 完全不在这条链上，它只在 flex-basis: auto 时被当作 fallback 参考值，且仍受内容宽度（比如 verylongwordwithoutspaces）干扰。
常见错误现象：
-
width: 200px; flex-basis: 150px;→ 渲染结果就是150px，width被跳过解析 -
flex: 1;→ 展开为flex: 1 1 0%，此时width彻底失效，连 fallback 的机会都没有 -
flex-direction: column;下写width: 200px;和flex-basis: 100px;→ 后者控制的是高度，前者只是交叉轴约束，互不冲突但也不叠加
flex-basis: auto 时 width 才可能起作用，但非常不可靠
只有当 flex-basis 显式为 auto（或未声明，取默认值），浏览器才会去查 width（水平主轴）或 height（垂直主轴）。但这只是“尝试读取”，不是“保证采用”。
实际行为取决于：
- 内容固有尺寸：长单词、图片原始宽、内联元素自然宽，都可能远超
width值 -
min-width干预：min-width: auto（flex 项目默认）会强制撑开到内容宽度，width形同虚设 - 父容器约束：若父容器宽度未定义（如
display: inline-flex或浮动后未清除），width: 100%也会算错
真正稳定控制尺寸，别靠 width，用 flex 缩写
想让一个 flex 项目“固定宽度不伸缩”，width: 200px; 是最弱方案；flex-basis: 200px; 稍好，但仍可能被 flex-shrink 压缩；唯一可靠的是同时锁死伸缩性与基准值：
flex: 0 0 200px; —— 表示 flex-grow: 0（不拉伸）、flex-shrink: 0（不压缩）、flex-basis: 200px（起点尺寸）
其他常见组合：
-
flex: 0 1 200px;→ 允许压缩，禁止拉伸，适合响应式收窄 -
flex: 1 1 200px;→ 先按200px分配，再均分剩余空间（注意：这不是上限） -
flex: none;→ 等价于flex: 0 0 auto，此时width恢复为主控属性（但需注意display类型是否支持）
百分比 flex-basis 在旧环境容易出错，优先选绝对单位
flex-basis: 50% 看似直观，但在 Android WebView 4.4–5.1 中解析不准；而 flex-basis: 120px 或 flex-basis: 25vw 更稳定。更关键的是：flex-basis: 100% 是“初始占满父容器”，不是“最大宽度”，加上 padding/border/margin 就极易溢出。
真正容易被忽略的点是：flex-basis 不是最大宽度，也不是固定宽度，它只是空间分配的起始点；最终尺寸由 flex-grow、flex-shrink、min-width、max-width 共同决定——漏掉其中任何一个，都可能导致布局意外撑开或塌缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
