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

Question

见下图：

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

我的问题：

有什么方法可以得到右上角的例子，以及最好的例子，with flex-boxes，但不求助于 JS，显示：table，还是负利润率恶作剧？

Answer 1

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

要使其适用于多行，您所要做的就是将每一行包装在 div 中。参见 this fiddle。

Answer 2

由于您在图像中使用 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 3

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

.wrapper {
  border: 4px dotted rgb(96, 139, 168);
  width: 500px;
}

.box {
  display: flex;
  flex-wrap: wrap;
  margin:-10px;
}

.box>* {
  flex: 1 1 160px;
  margin: 10px;
  /*presentation styles*/
  background-color:#4a56cada;
  color:white;
  height:40px;
}

<div class="wrapper">
      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
        <div>Ten</div>
      </div>
  </div>

可以在MDN docs

中找到更详细的解释

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

Multiple flexboxes with margin-right, except the last one in the row? Without JS?

html

css

flexbox