Flexbox网格，最大3列，最小2?宽度相等的项目

Question

我正在尝试创建一个最多有3列的网格。但是，如果网格中只有2个项目，我希望它们拉伸以分别占据50%的空间。

目前，这一切都在起作用，但如果网格中的项目数量不是3的倍数，那么剩余的项目就会占据剩余的空间。我希望它们的宽度都相等。这可能吗？

这就是我的成就：

https://codepen.io/elly175/pen/jOqJNXa

.flex-container {
display: flex;
flex-wrap: wrap;
margin: 40px 0;
width: 900px;
box-sizing: border-box;
}
.flex-item {
box-sizing: border-box;
padding: 15px 18px;
font-size: 16px;
border: 1px solid #777;
flex: 1;
min-width: 33.33%;
}

<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
</div>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
<div class="flex-item">Five</div>
<div class="flex-item">Six</div>
<div class="flex-item">Seven</div>
</div>

Answer 1

如果元素不是第一个或第二个，则可以禁用flex-grow：

.flex-container {
display: flex;
flex-wrap: wrap;
margin: 40px 0;
box-sizing: border-box;
}
.flex-item {
box-sizing: border-box;
padding: 15px 18px;
font-size: 16px;
border: 1px solid #777;
flex: 1;
min-width: 33.33%;
}
.flex-item:not(:first-child):not(:nth-child(2)) {
flex-grow:0;
}

<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
</div>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
</div>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
<div class="flex-item">Five</div>
</div>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
<div class="flex-item">Five</div>
<div class="flex-item">Six</div>
<div class="flex-item">Seven</div>
</div>

Answer 2

您可以在项目中添加弹性基准：33.33%，或者在本例中添加宽度：33.33%。当然，您可以添加flex：0 0 33.33%。这意味着flex增长和收缩0。因此不同容器的宽度不会发生变化。也许这有帮助：

.flex-item {
box-sizing: border-box;
padding: 15px 18px;
font-size: 16px;
border: 1px solid #777;
flex: 0 0 33.33%;
}