1、当一行有三个元素的时候直接加个伪类
原图:
想要实现的效果
html代码
<div class="floor-centerList">
<div class="item" v-for="(item,index) in servelist"></div>
</div>
style代码
.floor.centerList{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
<!--加上after伪类,解决最后一排数量不够两端分布的情况-->
.floor.centerList:after{
content: '';
width: 子元素的宽度;
border:1px solid transparent;
}
2.当一行有3个以上的元素时,添加占位元素
html代码
<div class="floor-centerList">
<div class="item" v-for="(item,index) in servelist"></div>
<div class="pick" v-for="(val,i) in 6"></div>
</div>
style代码
.pick{
width: 224px;
overflow: hidden;
}