flex布局如何最后一行左对齐并且间距相同

flex布局 设置justify-content: space-between后最后一行会如下这样：

解决：可以在父元素添加after伪类，并在子元素里添加动态类名，proList.content.length是子元素总数，判断最后一行余几个，以下是一行四个为例：

 :class="(proList.content.length%4)==3?'three-product':''||(proList.content.length%4)==2?'two-product':''||(proList.content.length%4)==0?'zero-product':''"

 .hydrated{
     display:flex;
     justify-content: space-between;
     flex-wrap: wrap;
     &::after{
       content: "";
       flex: auto;
     }
    .three-product{
     &:nth-last-of-type(1),&:nth-last-of-type(2){
        margin-left: 24px;
      }
    }
    .two-product{
      &:nth-last-of-type(1){
        margin-left: 24px;
      }
    }
   .zero-product{
      &:nth-last-of-type(1),&:nth-last-of-type(2),&:nth-last-of-type(3){
      margin-left: 24px;
        }
      }
     .tb-cell{
       width: 23%;
       height:270px;
       margin-bottom: 10px;
       background:rgba(255,255,255,1);
       box-shadow:0px 0px 10px 1px rgba(239,246,252,1);}

最后得到以下的效果