如何通过flex布局调整CSS元素的视觉权重以分配空间？

本文共计946个文字，预计阅读时间需要4分钟。

很多人以为 `flex-grow: 2` 和 `flex-grow: 1` 是按 2:1 分配总宽度，实际上——它只对剩余空间生效。如果所有子项加起来已经填满容器，`flex-grow` 就完全不起作用了。

• 先按 width / flex-basis 占位，再算剩下多少空间
• 所有 flex-grow 非零项，按各自值占「总 grow 值」的比例分剩余空间
• flex-grow: 0 的项完全不参与伸缩，哪怕容器还有空

比如容器宽 600px，两个子项：flex-basis: 200px + flex-grow: 1，另一个 flex-basis: 300px + flex-grow: 2。已占 500px，剩 100px；分配比例是 1:(1+2)=1/3 和 2/3 → 实际宽度变成 233px 和 367px。

别混用 flex-basis 和 width，否则行为不可控

flex-basis 是弹性布局里真正的“基准尺寸”，width 在 flex 容器中只是 fallback。一旦同时设了 width 和 flex-basis，浏览器会优先用 flex-basis，但某些旧版 Safari 会出错，导致布局塌陷或溢出。