flex布局space-between最后一行左对齐的方法

一、问题引入

给最外面的大盒子设置 justify-content: space-between;

如果盒子的个数是1个，3的倍数，或者是3的倍数+1的时候，是正常的。但是当盒子的个不符合刚才所列举的个数。就会出现最后一行中间是空的。如下图:

 二、解决办法

方案一、补充个数

通过对数据处理，补充个数到整数倍，可实现效果，其内容为空；具体js处理数据代码不放上去了；

方案二、父元素伪元素

给父元素设置伪元素，宽度和子元素宽度一样，原理就是伪元素把最后一个子元素挤过来

.main:after {
    content: "";
    width: 100px;
}