flex弹性布局最后一行会居中显示

之前遇到过的问题，记录一下

代码如下：

//假如.box是父元素，可以给他添加一个伪元素
.box::after{
   content: '';
  flex: auto; //这里使用flex: auto;或者flex: 1;都是可以实现效果的
}

但是在手机端时又出现了一个问题，就是手机端时每行只有一个元素时，每个不是居中的状态，比较丑。所有我想到了使用媒体查询，当页面的宽度是手机的范围时给子元素添加一个 margin:0 auto;,最终成解决。 

也可以使用网格布局解决代码如下：

.box{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(400px,1fr));//这里面的400px是每个子元素的宽度
}