flex-basis非auto时width完全失效，浏览器直接忽略width；仅flex-basis: auto时width才可能作为最小约束起作用，但受内容、flex-shrink等影响；稳定控制尺寸应使用flex: 0 0 。
flex-basis 不为 auto 时，width 完全失效
只要 flex-basis 被显式设为非 auto 值（比如 120px、30%、0），浏览器就跳过 width 的解析——不是覆盖，是根本不用它。
常见错误现象：width: 200px; flex-basis: 150px; 渲染结果就是 150px，哪怕 width 写在后面也无效；flex: 1 展开为 flex: 1 1 0%，此时 width 彻底被忽略。
-
flex-basis: 0或flex-basis: 0%→ 主轴初始尺寸为 0，width不参与计算 -
flex-basis: 200px→ 直接取该值，width被丢弃（连 layout 阶段都不读） -
flex-direction: column时同理，height和flex-basis冲突，规则一致
flex-basis: auto 时，width 才可能起作用
flex-basis: auto 是唯一让 width（或 height）有机会介入的场景，但它只是“参考”，不保证生效。
实际行为取决于内容：如果子项内有不可折行的长单词（如 verylongwordwithoutspaces），即使写了 width: 200px，最终宽度仍可能远超该值；如果内容为空或极短，width 才大概率被采用。
-
flex-basis: auto+width: 200px+ 纯文本 → 多数情况按内容宽度撑开，width仅作最小约束 -
flex-basis: auto+width: 200px+min-width: 200px→ 更接近预期，但依然受flex-shrink影响 - 想彻底绕过 flex 分配逻辑？直接用
flex: none，此时width恢复为盒模型主控属性
固定尺寸推荐写法：flex: 0 0
靠 width 锁死宽度在 flex 容器里不可靠；真正稳定的做法是用 flex 缩写同时控制伸缩性与基准值。
flex: 0 0 200px 表示：不增长（flex-grow: 0）、不收缩（flex-shrink: 0）、基准尺寸为 200px。这比单独写 width: 200px 或 flex-basis: 200px 更完整。
-
flex: 0 1 200px→ 允许收缩但禁止拉伸，适合需要响应式压缩的场景 -
flex: 1 1 200px→ 先按200px分配，再均分剩余空间，注意此时200px是起点，不是上限 - 百分比值（如
flex-basis: 50%）在旧 Android WebView（4.4–5.1）中解析不准，优先选px或vw
媒体查询中改 width 很可能白忙活
在断点里只改 width，常因 flex-shrink 或容器空间不足而失效；而改 flex-basis 会触发整套 flex 重排，行为可预测。
例如：@media (max-width: 768px) { .item { width: 100%; } } —— 若父容器 flex-wrap: wrap 且总宽不足，该项目仍可能被压缩到 60%；但换成 flex-basis: 100%，项目就会独占一行，flex-grow 自动失效。
- 响应式场景下，
flex-basis是更底层、更可控的入口 -
flex-basis不是“最大宽度”，也不是“固定宽度”，它是空间分配的起点，最终尺寸由flex-grow、flex-shrink和min-width共同决定 - 最容易被忽略的细节：哪怕写了
flex: 0 0 200px，若父容器设置了min-width: 100px且内容溢出，仍可能突破 200px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
