flex-basis 优先级永远高于 width，只要 flex-basis 不是 auto，width 就被忽略；想让 width 生效需设 flex-basis: auto，锁死尺寸则用 flex: 0 0 200px。
flex-basis 和 width 同时设置，哪个生效？
flex-basis 优先级永远高于 width —— 只要 flex-basis 不是 auto，width 就被忽略。这不是浏览器差异，而是 Flex 布局规范定义的行为。
常见错误是写 width: 200px; flex-basis: 150px;，结果发现宽度是 150px；或者写 width: 200px; flex: 1;，却看到按钮或卡片根本没变宽，因为 flex: 1 展开为 flex: 1 1 0%，flex-basis: 0% 直接覆盖了 width。
- 想让 width 生效？必须让
flex-basis回退到 auto：删掉flex-basis声明，或显式写flex-basis: auto; - 想锁死尺寸不伸缩？用
flex: 0 0 200px;，此时flex-basis: 200px是基准，flex-grow: 0和flex-shrink: 0阻止任何拉伸压缩 - 只设
width但父容器是display: flex？大概率失效，除非子项同时满足：flex: none或flex: 0 0 auto且未声明flex-basis
box-sizing: border-box 能不能救 width 失效？
不能。box-sizing 解决的是 padding/border 是否计入 width 的问题，和 flex-basis 与 width 的优先级无关。它只影响“width 值本身怎么解释”，不改变“width 是否参与 flex 计算”。
典型误用：.item { width: 200px; padding: 16px; box-sizing: border-box; } 放在 flex 容器里，依然可能被 flex-basis 覆盖。更危险的是：如果还写了 flex-basis: 100%，IE 中会因 box-sizing 和 flex-basis 交互出错（Flexbug #7），导致溢出。
- 正确做法：统一用
flex-basis控制主轴尺寸，box-sizing: border-box仅用于确保 padding/border 不撑破该尺寸 - 必须兼容 IE10/11？放弃
flex-basis，改用-ms-flex: 0 0 200px;+width: 200px;+box-sizing: border-box; - 全局预防：加
* { box-sizing: border-box; }，避免 content-box 下 width + padding 意外超限
为什么 flex-basis 设成 0 后元素“消失”了？
不是消失，是被压缩到内容最小宽度（min-width: auto 的默认行为）。当 flex-basis: 0 且内容为空、又没设 min-width，浏览器会把它压到视觉上不可见。
比如 .sidebar { flex: 0 0 0; }，里面只有文字，但文字极少甚至为空，它就塌了。这不是 bug，是 flex-shrink 在严格执行：剩余空间为负，按权重压缩。
- 解法不是加 width，而是加
min-width: 0;—— 这告诉浏览器：“允许我缩到 0”，配合flex-basis: 0才真正可控 - 如果内容是图片或长文本，还要防溢出：
min-width: 0; overflow: hidden; - 侧边栏固定宽场景慎用
flex-basis: 0；直接用flex: 0 0 240px;更稳妥
响应式中 flex-basis 切换时容易踩的坑
媒体查询里改 flex-basis 值本身没问题，但漏掉配套约束就会错乱。比如小屏下把侧边栏从 flex-basis: 240px 改成 flex-basis: 100%，若没同步放开 min-width，它仍会卡在 240px 强行换行。
另一个隐形陷阱：用 flex: 1 1 auto 做自适应项，小屏下内容变多，flex-basis: auto 会取内容宽，撑破容器 —— 这比写死 flex-basis: 0% 更难调试。
- 断点切换时，
flex-basis和min-width必须配对修改：大屏锁死min-width: 240px，小屏放开为min-width: 0 - 避免
flex: 1 1 auto，改用flex: 1 1 0%，确保剩余空间分配逻辑稳定 - 检查 computed 样式里的
flex-shrink值，很多“意外收缩”其实是框架或重置 CSS 悄悄设了flex-shrink: 1
真正决定最终宽度的，从来不是单个属性，而是 flex-grow、flex-shrink、flex-basis 三者协同计算的结果。盯着 width 改，不如打开开发者工具，看 computed 样式里这三项的实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
