flex布局——space-between(around)最后一行不能左对齐的解决方案

分为两种情况，分别是三列及三列以上的解决办法

1、三列时（图为借鉴的，懒得自己画）

要实现为

代码如下：

<div class="box">
	<div class="list" v-for="(item,index) in lists" :key="index">{{item}}</div>
<div>

data(){ return{ lists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14] } }

.box {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box:after{
	content:' ';
	width:32%; //这个宽度和子元素宽度一致
	height:0;
	display:block;
}
.box .list{
	width:32%;
}

2、三列以上时如下（图为借鉴）

实现为

代码如下：

<div class="box">
	<div class="list" v-for="(item,index) in lists" :key="index">{{item}}</div>
<div>

data(){ return{ lists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14] } }

 .box {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .box:after{
    content:' ';
    flex:auto;
  }
  .box .list{
	margin-right:0.55rem;
	width: -webkit-calc((100% - 0.55rem*4)/ 4);
	width: calc((100% - 0.55rem*4)/ 4); 
}

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则； 支持版本：CSS3

动态尺寸：calc((100% - padding * padding的数量 - margin * margin的数量 - border * border的数量) / 列数)， 没有边距就不减。