【flex弹性布局】最后一行列表左对齐

效果图:

html:

<div class="list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.list{
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &::after{
        content: "";
        width: 180px;  /*与子元素的宽度一致*/
    }

    .item{
        width: 180px;
        height: 180px;
        background: #ddd;
        margin-bottom: 20px;
    }
}

posted @ 2021-01-09 16:55  cdgogo  阅读(761)  评论(0编辑  收藏  举报