彈性布局justify-content:space-between；最後一行元素寬度不足時左對齊的幾種方法
1.列數或總數固定不變（添加占位空元素）
想要的效果：
每一頁固定十個元素，最後一頁數量不足十時，從左到右從上到下依次排列。
分析：
此處的情況為總數固定不變，每一頁輪播圖固定是十個元素。核心思想即，在最後一頁，元素數量不足十的時候，用空元素補足，以達到想要的布局（即從左到右依次布局）。
解決：
<view v-for="(w, j) in v" :key="j">
<view v-if="w.pic" class="cell" :style="{'background': 'url('+w.pic+') no-repeat', 'background-size': '113rpx', 'background-position': 'center top'}" @click="goTo(w)">
<text>{{ w.name }}</text>
</view>
</view>
<view class="" v-for="index of 10-v.length" :key="index"></view><!--此行為占位符-->
上圖紅框中均是補足的空元素，可以看到寬高均為0，是以不顯示。
2.總數不定且列數不定
想要的效果：
每個元素長度不定，每行元素個數不定，最後一行能夠從左到右依次排列
（1）方法1（js計算）
分析：
在最後一行添加一個（寬度=行寬-最後一行元素寬度總和-元素間距總和）的占位元素（或僞元素::after），則可以實作該效果。
實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 350px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item{
margin-top: 50px;
padding: 0 10px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="item">12332131212</div>
<div class="item">123321</div>
<div class="item">321</div>
<div class="item">123332</div>
<div class="item">123123331223</div>
<div class="item">121223</div>
<div class="item">32</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
function arrange(parent){//傳回一個二維數組，表達元素的換行資訊
let rowW=$(parent)[0].clientWidth
let children = $(parent).children()
let arranged = [];
let row = [];
let width=0;
for(let i=0;i<children.length;i++){
if(width+children[i].clientWidth<=rowW){
width=width+children[i].clientWidth
row.push(children[i])
}else{
arranged.push(row);
row=[children[i]];
width=children[i].clientWidth;
}
if(i===children.length-1){
arranged.push(row);
}
}
return arranged;
}
function calculation (parent,spacing){//計算占位元素寬度
let rowW=$(parent)[0].clientWidth
let arrangeArr=arrange(parent);
let width = 0;
for(let i=0;i<arrangeArr[arrangeArr.length-1].length;i++){
width = width+arrangeArr[arrangeArr.length-1][i].clientWidth;
}
let fake = $("<div></div>")
width=(rowW-width-((arrangeArr[arrangeArr.length-1].length)*spacing))
let style ="width:"+width+"px"
fake.attr("style",style);
$(parent).append(fake)
}
calculation(".parent",10)//此處的10為最後一行元素間距為10px，若有需要還可以寫個方法動态計算此值
</script>
</html>
效果：
（2）方法2（純css方法）
分析：
為父元素添加一個flex：auto的僞元素::after,用以占滿最後一行的剩餘寬度。
實作：
.parent::after{
content: "";
flex: auto;
}
效果：
可以看到最後一行剩餘寬度都被父元素的::after占滿，但是存在最後一行元素失去間距的問題，可以為每個子元素添加一個margin來解決。
修改：
.parent::after{
content: "";
flex: auto;
}
.item{
margin-top: 50px;
margin-right: 5px;
padding: 0 10px;
height: 50px;
background-color: red;
}
效果：