纯CSS实现flex-wrap换行时移除元素的margin-right

嘿，这个问题我之前做响应式布局的时候也踩过坑——last-child只能搞定最后一个元素，没法处理换行后每行的末尾项对吧？不过纯CSS完全能解决，给你分享几个实用的方案，按需选就行：

方案1：负margin抵消容器间隙（最小改动原代码） #

这个方法不用动item的margin规则，只需要给wrapper加两行样式，就能抵消每行末尾item的margin-right带来的间隙：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
  /* 新增：用负margin让容器能容纳item的右侧margin */
  margin-right: -36px;
  /* 新增：padding保证内容不会超出容器边框 */
  padding-right: 36px;
}
.wrapper__item {
  flex: 0 0 45%;
  width: 330px;
  height: 160px;
  margin: 0 36px 18px 0;
  background-color: lightcoral;
}

原理：负margin-right给wrapper额外扩展了36px的宽度，刚好能装下item的右侧margin；而padding-right又把内容拉回容器边框内，这样每行第二个item的margin-right就不会在容器右侧留空白了，同时保持其他item的间距不变。

方案2：用Flex原生的gap属性（推荐，最简洁） #

Flexbox自带的gap属性就是专门用来处理元素间距的，它会自动跳过容器边缘的间隙，不用自己算margin，代码更干净：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
  /* 水平间隙36px，垂直间隙18px，和你原来的margin规则对应 */
  gap: 18px 36px;
}
.wrapper__item {
  /* 计算每个item的宽度：50%减去水平gap的一半，这样两个item加起来刚好填满容器 */
  flex: 0 0 calc(50% - 18px);
  height: 160px;
  background-color: lightcoral;
  /* 去掉原来的margin */
  margin: 0;
}

优点：不用操心边缘间隙的问题，浏览器自动处理；代码更简洁，以后要调整间距只需要改gap的值就行。兼容性也很好，除了IE几乎所有现代浏览器都支持。

方案3：用nth-child选中每行末尾元素 #

因为你是固定每行2个元素，所以可以用nth-child(2n)选中第2、4、6...个元素，直接去掉它们的margin-right，再调整item的宽度让总布局填满容器：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
}
.wrapper__item {
  /* 每个item占50%宽度，减去一半的水平间距，保证两个item加起来+间距刚好100% */
  flex: 0 0 calc(50% - 18px);
  height: 160px;
  margin: 0 36px 18px 0;
  background-color: lightcoral;
}
/* 选中每行的第二个元素，去掉右侧margin */
.wrapper__item:nth-child(2n) {
  margin-right: 0;
}

注意：这个方案只适合固定每行数量的情况，如果以后要改成每行3个，就得把选择器改成nth-child(3n)，灵活性不如前两个方案。

内容的提问来源于stack exchange，提问作者webta.st.ic