flex布局 关于space-between最后一行向左对齐的解决方法

space-between是flex布局中，一种两端对齐的排列方法,
当最后一排的元素个数不足时，会自动向两端散开或居中。
解决方法：
主要思路为在父元素里面添加一个after伪元素,宽度与子元素宽度相同
当排列方式为一行两个、三个时
HTML

<div class="father">
	<div class="son"></div>
</div>

CSS(less语法 下同)

.father{
	display:flex;
	justify-content:space-between;
	&:after{
        content: "";
        width: 30%; 
    }
    .son{
    	width:30%;
	}
}

当排列方式为一行四个时
HTML

<div class="father">
	<div class="son"></div>
	<div class="pick"></div>
</div>

CSS

.father{
	display:flex;
	justify-content:space-between;
	&:after{
        content: "";
        width: 20%; 
    }
    .son{
    	width:20%;
	}
	.pick{
		width:20%;
		border:1px solid transparent;
		overflow:hidden;
	}
}