flex flex-wrap 最后一行的css样式

前言

一行四列，每个元素有固定的margin间距，4n处消除右边距，最后一行去除下边距，目的是不影响外层容器的布局

效果

代码

.list {
  display: flex;
  flex-wrap: wrap;
}

.item {
  margin: 0 24px 24px 0;

  &:nth-child(4n) {
    margin-right: 0;
  }

  &:nth-child(4n+1):nth-last-child(-n+4) {
    margin-bottom: 0;
  }

  &:nth-child(4n+1):nth-last-child(-n+4)~.item {
    margin-bottom: 0;
  }
}

实现原理

兄弟元素定位

结束语

如果觉得有用还请点个赞，谢谢