一、justify-content对齐问题描述
在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。
但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。
image.png
二、处理方法
我们可以使用空白标签进行填充占位
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
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 100px;
height:100px;
}
/* 和列表一样的宽度和margin值 */
.container > i {
width: 100px;
}
由于<i>元素高度为0，因此，并不会影响垂直方向上的布局呈现。
image.png
三、采用gird布局
Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。
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>
css
.container {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 100px);
}
.list {
width: 100px;
height:100px;
}
image.png
