flex布局 justify-content:space-between; 解决最后一排数量不够自动向两端排列问题

2,387 阅读1分钟

flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况

原图

20190517152813251.png

实现效果

20190517152129709.png

方案一(父级添加 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;
}