flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况
原图
实现效果
方案一(父级添加 after 伪类法,解决最后一排数量不够两端分布的情况)
<div class="flex">
<div class="flex-item" v-for="item in len">列表</div>
</div>
data(){
return {
len : 14
}
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
text-align: justify;
}
<!--加上after伪类,解决最后一排数量不够两端分布的情况-->
.flex:after{
content: '';
width: 30%;
border:1px solid transparent;
}
.flex-item{
width:30%;
border:1px solid #ff6600;
margin-bottom: 10px;
}
完美解决两端对齐布局混乱的情况
当然,这种解决方案只适合每列有3个的分布情况,如果布局每列有4个,5个,可参考方案2
方案二(补位添加节点法,这种方案适用于多种排列方式)
<div class="flex">
<div class="flex-item" v-for="item in len">列表</div>
<div class="list" v-for="item in (row - len % row)" v-if="len%row > 0"></div>
</div>
data(){
return {
len : 14, // 一共有多少个
row: 4 // 有几行(实际情况,行数应该计算得来,这里偷懒了)
}
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
justify-items: center;
text-align: justify;
}
.flex-item{
width:20%;
border:1px solid #ff6600;
margin-bottom: 10px;
padding: 10px 5px;
display: flex;
justify-content: center;
}
.list{
content: '';
width: 20%;
border:1px solid transparent;
padding: 5px;
overflow: hidden;
}