- 此问题在此处已有答案**：
Targeting flex items on the last or specific row（10个答案）
5年前关闭。
我有一个使用flex的简单网格。工作正常，但我的问题是，当没有足够的元素来适应行时，它会将元素分隔到边缘。
例如，当我有一行适合每行3个项目，总共有5个项目，底部行将有两个元素在边缘，中间有一个间隙。
下面是我的代码：
.grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.grid div {
flex-basis: 26%;
height: 50px;
background-color: red;
margin-bottom: 20px;
}<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>正如您所看到的，在最下面一行中有一个空白，是否有一个flex方法可以将所有内容向左推，同时保留justify-content: space-between？
我可以给除第n个孩子3n以外的所有孩子都设置保证金，但我想知道是否有更好的灵活方法。
1条答案
按热度按时间hgqdbh6s1#
一个解决方案是添加一个伪元素，使其行为与其他元素相同，这样总共就有6个伪元素了。
即使你最初有6个元素，这也不是问题，因为伪元素没有高度，所以它不会创建第三行。所以无论最后一行的元素数量是多少（1，2或3），它总是有效的：
一个二个一个一个