css - 如何在使用flexbox，flex-wrap和last-of-type的同时从最后一个元素中删除右边距

Question

This question already has answers here:

Removing margin from flex items when they wrap

(4个答案)


3年前关闭。




当我使用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;
    }
}

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

最佳答案

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

关于css - 如何在使用flexbox，flex-wrap和last-of-type的同时从最后一个元素中删除右边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47558470/

上一篇：php - 解析错误 : syntax error, 意外 '?' in/vendor/laravel/framework/src/Illuminate/Foundation/helpers.php on line 233 - laravel

下一篇：neural-network - 如何在多类分类任务中校准神经网络输出层的阈值？

Answer 1

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