如何在使用 flexbox、flex-wrap 和 last-of-type 时从一行中的最后一项删除右边距

Question

当我使用 flexbox 时，如果我想要一个边距来为每个元素添加间距，我通常会这样做：

.flexbox-item {
  flex: 1 0 auto;
  margin-right:10px;
}
.flexbox-item:last-of-type {
  margin-right: 0px;
}

如果我不使用 flex-wrap，这会起作用，因为它们的最后一项将始终是该行中的实际最后一项。

但是，当我使用 flex-wrap 时，该行的最后一项会根据窗口宽度而变化（并且会自动添加更多行），这意味着有时我会从一行中的第一项中删除右边距。

有人知道这个问题的解决方案吗？

编辑：我不相信这是重复的

这是关于保持行水平相等，而不是垂直。

无论如何，我的解决方案是使用负边距，通过挖掘它可以在该线程上找到它，但这不是最流行的解决方案。这是我的解决方案：

似乎这个问题的答案是给父 flexbox 容器添加一个负边距。

.flexbox-container {
  margin-right:-10px;
}
.flexbox-item {
  flex: 1 0 auto;
  margin-right:10px;
}

然后当您的 flexbox 项目更改为 100% 时，只需从项目中删除右边距：

@media (max-width: 767px) {
    .flexbox-item {
      margin-right:0px;
    }
    .flexbox-container {
      margin-right: 0px;
    }
}

如果有更好的解决方案，我会全力以赴。

Answer 1

我不完全确定你的用例。但为什么不justify-content: space-between使用margin. 那么您不需要删除行中最后一个元素的边距。 https://jsfiddle.net/n2vqwg79/