flex布局-间隔均匀，最后一排左对齐排列

在使用flex布局时，发现要使其间隔相同，当处于最后一行时排列将会有误

更改了样式之后，在要改的布局外加div，我定义为cardList，每块的card class名为card增加伪元素：

.cardList{
  display: flex;
  width: auto;
  justify-content: space-between;
  flex-wrap:wrap
}
.cardList:after{
  content: "";
  width: 30%; //与块级的宽度相同
  display: block;
  height: 0;
}
.card{
  height: 300px;
  width: 30%;
}

效果图：

或者自定义

.card {
    height: 185px;
    margin-bottom: 20px;
    width: 24%;
  }
 .card:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
  /* 如果最后一行是2个元素 */
  .card:last-child:nth-child(4n - 2) {
      margin-right: calc(48% + 8% / 3);
  }

同理：
一行六个的：

.card {
    height: 135px;
    margin-bottom: 20px;
    width: 16%;
  }//卡片大小
  .card:last-child:nth-child(6n - 4) {
    margin-right: calc(64% + 16% / 5);//最后一行两个
  }
  .card:last-child:nth-child(6n - 3) {
    margin-right: calc(48% + 12% / 5);//最后一行三个
  }
  .card:last-child:nth-child(6n - 2) {
    margin-right: calc(32% + 8% / 5);//最后一行四个 8%为 4% *2
  }
  .card:last-child:nth-child(6n - 1) {
    margin-right: calc(16% + 4% / 5);  //最后一行五个 16%为一个card的大小，4%为100-16*6，5为中间5个间隔
  }