弹性盒子元素宽度“算不准”是因width/flex-basis被盒模型、收缩行为和浏览器隐式规则改写：需设box-sizing:border-box、避免混用width与flex-basis、用flex-shrink:0或flex:0 0 xx锁定宽度、ios safari下button需min-width:1px、全局box-sizing须覆盖伪元素。
弹性盒子（Flex）里元素宽度“算不准”，不是 Flex 本身坏了，而是你写的 width 或 flex-basis 被盒模型、收缩行为和浏览器隐式规则悄悄改写了。
flex-basis 在 content-box 下会漏算 padding 和 border
默认情况下，flex-basis: 200px 指的是内容区宽 200px。如果你同时设了 padding: 12px 和 border: 2px，实际占位就是 200 + 24 + 4 = 228px —— 这在 flex 容器里可能直接导致换行或溢出。
- 显式加
box-sizing: border-box到每个 flex 子项，让flex-basis真正代表“总宽度” - 避免混用
width和flex-basis：后者优先级更高，前者可能被忽略 - 如果必须保留 padding/border，用
flex-basis: calc(200px - 24px)主动减去内边距和边框
flex-shrink 默认开启，固定宽度会被压缩
哪怕你写了 width: 164px，只要父容器空间不足，且子项没关掉收缩，它就会被压窄——这不是 bug，是 flex 的默认行为。
- 想锁死宽度，必须写
flex-shrink: 0，或者更稳妥地用简写：flex: 0 0 164px（不放大、不缩小、基准宽 164px） -
flex: 1会让所有子项均分剩余空间，但前提是它们的flex-basis不冲突；若一个设了flex-basis: 0，另一个设了flex-basis: auto，结果就不可控 - 别依赖
min-width: auto来“保底”——它只防缩到内容以下，不防 flex 分配逻辑干扰
iOS Safari 对 button 等表单控件有特殊 min-width 保护
在 iOS Safari（尤其 15+）中，<button></button> 会强制应用 min-width: min-content，且忽略你写的 min-width: 0，导致同为 flex: 1 0 0 的按钮宽度差异极大。
- 实测有效解法是降级为
min-width: 1px，既绕过保护机制，又不影响视觉等宽 - 必须对所有参与 flex 分配的
<button></button>、<input>、<select></select>显式设置box-sizing: border-box和min-width: 1px - 别加
white-space: nowrap强撑文字——它会让长文本强行撑开，破坏 flex 均衡分配起点
全局 box-sizing 设置漏掉伪元素就等于没设
只写 * { box-sizing: border-box; } 是常见失效原因。伪元素如 ::before、::after 不继承该声明，仍按 content-box 计算，一不小心就撑破容器。
- 必须写全：
*, *::before, *::after { box-sizing: border-box; } - 这条规则得放在所有 CSS 最顶部，否则会被 Normalize.css 或 Ant Design 等 UI 库覆盖
- 第三方组件库常重置
box-sizing，检查 computed style 中是否被划掉；若被覆盖，需在对应 scope 内重复声明
真正麻烦的从来不是某一行代码写错，而是多个层叠规则（盒模型 + flex 分配 + 浏览器隐式样式 + 伪元素）同时生效时，你只改了其中一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
