flex-wrap布局最后一行向左对齐

作者: 写写而已 | 来源:发表于2020-03-02 15:31 被阅读0次

image.png

<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 class="list"></div>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
</div>

css，因为i元素没有高度，所以不会撑开container
i元素的数量取决于每行的上限-1，比如你打算一行放5个，那么i的个数不能少于5-1=4个，否则最后一行无法上下对齐

.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin: 10px;
}
.container > i {
    width: 100px;
    margin: 10px;
}

参考原文让CSS flex布局最后一行列表左对齐的N种方法