flex布局设置space-between(around)最后一行不左对齐问题

需求：在项目布局上使用弹性布局，要求每个盒子两端要对齐，而且最后一行在列不满的情况下要求左对齐；

遇到问题：

    使用flex的设置justify-content为space-between;发现最后一行不能左对齐，而是两端对齐方式导致形成下图1，图2所示的问题

图1

图2

 

解决办法：俩种

一.添加几个空格子，格子高度为0

根据布局列数添加红格子(指上面的div)，每行最大n列，那么在最后添加n-2个空红格子即可，比如要求每行四列，也就是要求每行4个红格子

	
	
	


	

		
1
		
2
		
3
		
3
		
3
		
3
		
3
		
3
		
3
		
3
		

        

	

二.伪元素after

1.当每行为3列时，见代码

	
	
	


	

		
1
		
2
		
3
		
3
		
3
		
3
		
3
		
3
		
3
		
3
		
3
	

2.当每行为4列时，见代码

	
	
	


	

		
1
		
2
		
3
		
3
		
3
		
3
		
3
		
3
		
3
		
3
		
3
	

3.不确定列数，见下