弹性盒元素左右对齐，超出换行左对齐

使用弹性盒display:flex;flex-wrap: wrap;justify-content: space-between;让元素实现左右对齐。

代码：

------------html
 <div class="box">
    <div class="con">1</div>
    <div class="con">2</div>
    <div class="con">3</div>
    <div class="con">4</div>
    <div class="con">5</div>
  </div>

------------css

<style>
  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .con {
    border: 1px solid;
    width: 32%;
    height: 200px;
  }
</style>

然鹅假如一行三个元素，换行后如果多出来一个还是左对齐的，那多出来两个则会出现下面的情况：

如何让多出来的两个向左对齐，只需要对弹性盒添加个伪元素即可，css代码如下：

 .box::after {   //这里伪元素中插入内容
    content: '';
    width: 32%;
    height: 200px;
  }

实现效果：