flex布局（弹性布局）盒子（列表）末尾排版出现空隙相隔过大的问题-图文式解答

先上图看看问题：

原本的排版是：

这个时候会出现两种情况：最后是两个产品或者三个产品，处理方式

<!--productsList是我的列表数组，除4取余就得到最后剩几个模块-->
:class="(productsList.length%4)==3?'three-product':''||(productsList.length%4)==2?'two-product':''"

样式代码：

  .two-product:after{
    content: '';
    width: 50%;
    border:1px solid transparent;
  }
  .three-product:after{
    content: '';
    width: 25%;
    border:1px solid transparent;
  }

结果：

原理就是利用css3的伪类元素，给其一个“孩子”用来占位