Flex子项宽度应由flex-basis精确控制，而非依赖width；需配合box-sizing: border-box、min-width: 0及内容溢出限制，避免隐式计算偏差。
Flex子项宽度计算不准确，通常是因为浏览器在 flex 布局中对 width、flex-basis、flex-grow 等属性的协同处理存在隐式换算逻辑，尤其当内容尺寸、盒模型（如 padding/border）、或父容器约束不明确时，容易出现“看着设了 200px，实际渲染却偏大或偏小”的情况。
用 flex-basis 明确初始主轴尺寸
不要只依赖 width 控制 flex 子项宽度——在 flex 容器中，width 仅作为 flex-basis 的 fallback，而真正参与 flex 计算的是 flex-basis。如果没显式设置，它会按 width（或 auto）推导，但 auto 会先测量内容，再结合 min/max-width 判断，极易引入偏差。
- 想让子项“默认占 200px，不拉伸也不压缩”，直接写：
flex: 0 0 200px（等价于flex-basis: 200px; flex-grow: 0; flex-shrink: 0） - 避免写
width: 200px; flex: 1——此时flex-basis默认为auto，仍会先测内容宽度，再按剩余空间分配，结果不可控 - 若需响应式，可用
flex-basis: 50%或flex-basis: calc(50% - 8px)，比靠width + flex混搭更可靠
注意盒模型对 flex-basis 的影响
flex-basis 默认作用于 content-box，即你写的 200px 指的是内容区宽度。一旦子项设置了 padding 或 border，总占用宽度就会超过 200px，导致换行或溢出。
- 统一使用
box-sizing: border-box，让flex-basis包含 padding 和 border - 或者，在设
flex-basis时主动预留空间，例如：flex-basis: calc(200px - 20px)（当左右 padding 共 20px 时） - 检查是否意外触发了
min-width: auto（flex 子项默认行为），它会阻止宽度收缩到内容以下；必要时加min-width: 0
避免 内容撑开 导致的隐式宽度变化
当 flex-basis 设为 auto（或未设），且子项内有长单词、图片、或未限制宽度的块级元素时，浏览器会以“内容自然宽度”为基准参与 flex 计算，造成视觉错位。
立即学习“前端免费学习笔记（深入）”；
- 对文本容器加
min-width: 0+overflow: hidden或text-overflow: ellipsis - 对图片加
max-width: 100%和height: auto，防止突破 flex-basis - 用
white-space: nowrap配合overflow: hidden控制单行文本，比依赖宽度数值更健壮
基本上就这些。核心就一条：在 flex 布局里，把宽度控制权交给 flex-basis，而不是寄希望于 width 被自动采纳。设清楚、管住盒模型、压住内容溢出，偏差自然消失。
