如何巧妙运用flex-grow和flex-basis实现CSS Flexbox布局的弹性扩展？

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

flex-grow仅在容器有剩余空间时才起作用，不是有剩余空间。它决定了所有子项如何分配剩余空间。总之，是否小于容器尺寸取决于所有子项的flex-basis（或width、height）之和。如果子项的flex-basis加起来已填满甚至超出容器，则flex-grow就不再分配空间了。

常见错误现象：flex-grow: 1 写了但元素宽度没变；多个子项都设 flex-grow: 1 却宽度不均——往往是因为它们的 flex-basis 不一致（比如一个写了 flex-basis: 200px，另一个是默认的 flex-basis: auto，而后者又受内容宽度影响）。

• flex-basis: auto 会先按内容宽高计算基准，再参与剩余空间分配
• flex-basis: 0 是最可控的起点：它把基准设为 0，让 flex-grow 完全主导伸缩比例
• 避免混用 width 和 flex-basis：两者冲突时，flex-basis 优先级更高（除非是 flex-basis: auto 且 width 已明确设置）

flex-basis: 0 与 flex-basis: auto 的实际差异

这是最容易被忽略的兼容性细节。