CSS Flex，最后两项与其余项的宽度不同

Question

我有一个容器，其中的项目设置为flex：1 0 25％;每行大约占三分之一，所以我有3行。当最后一行只有两项时，它们的宽度各为50％，为什么呢？

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    flex: 1 0 25%;
}

Answer 1

正如评论中已经提到的那样，您描述的行为是因为您将弹性商品的 flex 属性设置为：

flex: 1 0 25%;

它的缩写：

flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;

这意味着，您所有的flex-item的宽度基础都为flex-container的25％，而它们不能更小（无收缩），而是由于 flex而占用了所有剩余空间-增长：1；

因此，您的弹性项目的行为如下：

1个flex-item将占flex容器宽度的100％，

2个flex-item各自占据flex-containers宽度的50％，

3个flex-items将分别占flex-containers witdh的33.3333％，依此类推。

当您具有 flex-wrap：wrap;

时，每行也同样适用

如果您希望每行包含3个宽度约为1/3的项目，建议您将flex项目的flex属性设置为：

flex: 0 0 33.3333%

代码笔： docs

或者，您可以使用 CSS-Grid （CSS-Grid），在大多数情况下，如果要处理二维布局，这是更好的选择。

编辑：添加了CodePen示例