flex-grow 分配的是容器宽减去所有子项 flex-basis 总和与 margin 总和后的剩余空间；margin（尤其左右）会侵占可分配宽度，导致比例失真，应优先用 gap 实现间隙，必要时用 :not(:last-child) 控制 margin，并统一设 box-sizing: border-box。
flex-grow 计算剩余空间时会把 margin 算进去
flex-grow 分配的不是「容器总宽」，而是「容器宽 − 所有子项 flex-basis 总和 − 所有子项 margin 总和」后的剩余空间。只要子项带 margin（尤其是左右 margin），它就会直接吃掉一部分可用于分配的宽度，导致 flex-grow 实际能分到的空间变小、比例失真。
margin-right 导致最后一项多出空白
常见写法是给每个子项加 margin-right: 12px 来实现间隙，但这样会让最后一项也带右 margin，造成整体超容或触发 flex-shrink 异常收缩。此时即使所有子项都设 flex: 1 1 0，实际渲染宽度也会不一致——因为最后一项多占了 12px 的无效空间，其他项被迫压缩。
- 用
gap替代 margin：父容器加gap: 12px，完全不影响 flex-grow 计算逻辑 - 若必须用 margin，只给非末项加：用
:not(:last-child)限定，例如.item:not(:last-child) { margin-right: 12px; } - 检查开发者工具里
Computed面板的margin值，确认是否意外继承或重复设置
padding 和 border 也会干扰，尤其当没设 box-sizing
如果子项设置了 padding 或 border，而父容器又没设 box-sizing: border-box，那么 flex-grow 分配的是 content box 宽度，但最终总宽 = content + padding + border。这会导致内容区被压缩，甚至换行；看起来像 flex-grow 没生效，其实是空间被 padding/border 吃掉了。
- 统一给所有 flex 子项加
box-sizing: border-box - 避免在 flex 子项上混用
width和flex-grow：前者会覆盖flex-basis，让分配起点错乱 - 父容器若有
padding，也要计入——它会减少可用于分配的“净宽度”，需在设计时预留
真正等比分配必须从零起点出发，且排除所有外部尺寸干扰
flex-grow 的比例效果非常脆弱：哪怕一个子项漏写了 min-width: 0（比如里面有个 <img>），或者某处多了一个 margin，整个比例链就断了。它不像 Grid 那样直接声明占比，而是依赖一套连贯的尺寸推导流程。
- 可靠起点写法是
flex: 1 1 0（注意是数字0，不是0%或0px） - 含替换元素（
<img>、<input>）的子项，必须额外加min-width: 0 - 间隙只用
gap，文本容器加min-width: 0防止长字符串锁死最小宽度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
