Flex布局最后一行列表左对齐

如果每一行列数不固定

如果每一行的列数不固定，上面的方法均不适用，需要使用其他技巧来实现最后一行左对齐。这种方法很简单也很好理解，就是使用足够的空白标签进行填充占位。

具体的占位数量由最多列数的个数决定。例如，如果布局最多7列，我们可以使用7个空白标签进行填充占位；如果最多10列，则需要使用10个空白标签。

以下是示意的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>
    <i></i><i></i><i></i><i></i><i></i>
</div>

相关CSS如下，实现的关键是占位的<i>元素的宽度和margin大小设置得和.list列表元素一样即可，其他样式不需要写：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: -10px;
}
.list {
    width: 100px; 
    height: 100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
/* 和列表一样的宽度和margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}

由于<i>元素高度为0，因此不会影响垂直方向上的布局呈现。

最后的效果如下：

引用链接

使用空白元素占位让flex布局最后一行左对齐demo