具有margin-right的多个flexbox，除了行中的最后一个？没有JS？

Question

见下图：

当前设置位于左上角。如果我添加更多红色框，它们将换行到下一行，在第一行留下最后一个红色框的10px右边距。

我的问题：

有没有什么方法可以获得右上角的示例，以及带有弹性框的好东西，，但是没有诉诸JS， display：table < / em>，或负边缘的shenanigans？

Answer 1

由于在图像中使用width: 25%，我假设您每行需要4个元素。

因此，您只需要

.red-box {
    width: calc(25% - 30px/4);
    margin: 0 10px 10px 0;
}
.red-box:nth-child(4n) {
    margin-right: 0;
}

#wrapper {
    display: flex;
    flex-wrap: wrap;
    background: #01FF00;
}
.red-box {
    width: calc(25% - 30px/4);
    margin: 0 10px 10px 0;
    height: 100px;
    background: red;
}
.red-box:nth-child(4n) {
    margin-right: 0;
}

<div id="wrapper">
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
</div>

Answer 2

是的，只需使用.red-box:not(:last-child)作为CSS选择器，而不是.red-box。

要使它适用于多行，您所要做的就是将每行包裹在div中。请参阅this fiddle。

Answer 3

我知道我在这里迟到了将近 6 年，但是对于遇到类似问题的任何人，这两种情况的解决方案是用另一个 div 包裹 flex 容器，对 flex 容器应用负边距，最后，回馈每个弹性项目的边距相同：

continue

for

更详细的解释可以在MDN docs