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;
}
}
如果有更好的解决方案，我会全力以赴。