多个具有右边距的弹性框，除了行中的最后一个？没有JS？

Question

请参见下图：

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

我的问题：

有没有什么方法可以使用flex-boxes获得右上角的示例以及必备的功能，但不诉诸 JS、display:table或负边距恶作剧？

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>