flex布局动态匹配数量实现左对齐实例页面

回到相关文章 »

效果：

动态margin匹配（点击列表可删除）

代码：

CSS代码：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

HTML代码：

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

JS代码：

[].slice.call(document.querySelectorAll('.list')).forEach(function (list) {
    list.onclick = function () {
        this.parentNode.removeChild(this);    
    };
});