如何让可换行Flexbox中的所有项目宽度一致？

嘿，这个场景我太熟悉了！咱们来聊聊为什么flex-basis: 0 + flex-grow: 1是解决你需求的最优解，以及它比固定百分比方案灵活在哪。

要搞懂这一点，得拆解Flexbox里这两个属性的协作逻辑：

• flex-grow: 1的作用是让项目平分容器的剩余空间，但这里有个隐藏前提：如果不指定flex-basis，项目会默认以自身内容宽度作为分配空间的基准。这就会导致内容宽的项目“起始线”更高，就算grow值相同，最终宽度也会不一样。
• flex-basis: 0相当于把所有项目的“起始宽度”都重置为0，这样flex-grow: 1就能让它们完全平分当前行的可用空间——不管项目本身的内容有多宽，每行里的所有项目都会拥有一模一样的宽度。

你提到的固定百分比方案，在项目数量刚好凑整（比如3个项目占满一行）时确实能生效，但它的局限性很突出：

• 当最后一行只剩1个或2个项目时，它们会直接占据30%或60%的宽度，剩下的空间就变成了大片空白，视觉上很不协调。
• 如果项目本身的内容宽度远小于30%，也会被强制撑开成30%，白白浪费容器空间，灵活性大打折扣。

如果你担心项目被压缩得太窄，导致内容挤成一团，可以给项目加上min-width属性，配合默认的flex-shrink: 1（不用额外写），示例代码如下：

.flex-item {
  flex: 1 1 0; /* 简写形式，等同于flex-grow:1, flex-shrink:1, flex-basis:0 */
  min-width: 200px; /* 根据你的需求调整最小宽度 */
}

这样既保证了每行项目等宽，又能在容器宽度变小时自动换行，同时避免项目被压缩到无法阅读的程度。

内容的提问来源于stack exchange，提问作者Sandro Marques