如何在使用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时，行的最后一项会根据窗口宽度而改变（并且会自动添加更多行），这意味着我有时会从第1项中删除右边距

任何人都知道这个问题的解决方案吗？

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

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

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

似乎这个问题的答案是向父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/