一、justify-content 對齊問題描述
在 CSS flex 布局中，justify-content 屬性可以控制列表的水平對齊方式，例如 space-between 值可以實現兩端對齊。
但是，如果最后一行的列表的個數不滿，則就會出現最后一行沒有完全垂直對齊的問題。
如下代碼：
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%;
height: 100px;
background-color: skyblue;
margin-top: 15px;
}
然后列表的個數不多不少正好 7 個：
此時最后一行的小方塊的排列就顯得很尷尬了：
您可以狠狠地點擊這里：最后一行 flex 列表沒有對齊 demo
此時，最后一行應該左對齊排列才是我們想要的效果，如何實現呢？
其實實現的思路和 display:inline-block 的兩端對齊是一樣的。
二、如果每一行列數是固定的
如果每一行列數是固定的，則下面兩種方法可以實現最后一行左對齊。
方法一：模擬 space-between 和間隙
也就是我們不使用 justify-content:space-between 聲明在模擬兩端對齊效果。中間的 gap 間隙我們使用 margin 進行控制。
例如：
.container {
display: flex;
flex-wrap: wrap;
}
.list {
width: 24%;
height: 100px;
background-color: skyblue;
margin-top: 15px;
}
.list:not(:nth-child(4n)) {
margin-right: calc(4% / 3);
}
此時，布局效果是這樣的：
方法二：根據個數最后一個元素動態 margin
由於每一列的數目都是固定的，因此，我們可以計算出不同個數列表應當多大的 margin 值才能保證完全左對齊。
例如，假設每行 4 個元素，結果最后一行只有 3 個元素，則最后一個元素的 margin-right 大小是“列表寬度+間隙大小”的話，那最后 3 個元素也是可以完美左對齊的。
然后，借助樹結構偽類數量匹配技術(這篇文章“偽類匹配列表數目實現微信群頭像 CSS 布局的技巧”中的布局技巧就是借助這種技術實現)，我們可以知道最后一行有幾個元素。
例如：
- .list:last-child:nth-child(4n - 1) 說明最后一行，要么 3 個元素，要么 7 個元素……
- .list:last-child:nth-child(4n - 2) 說明最后一行，要么 2 個元素，要么 6 個元素……
在本例中，一行就 4 個元素，因此，我們可以有如下 CSS 設置：
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
width: 24%;
height: 100px;
background-color: skyblue;
margin-top: 15px;
}
效果如下 GIF 示意，刪除列表后，布局依然穩穩地左對齊。
眼見為實，您可以狠狠地點擊這里：動態匹配數量實現 flex 子項左對齊 demo
三、如果每一子項寬度不固定
有時候，每一個 flex 子項的寬度都是不固定的，這個時候希望最后一行左對齊該如何實現呢？
由於此時間隙的大小不固定，對齊不嚴格，因此，我們可以直接讓最后一行左對齊即可。具體方法有兩個：
方法一：最后一項 margin-right:auto
CSS 代碼如下：
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 最后一項margin-right:auto */
.list:last-child {
margin-right: auto;
}
最終效果如下 GIF：
方法二：創建偽元素並設置 flex:auto 或 flex:1
CSS 代碼如下：
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
. list {
background-color: skyblue;
margin: 10px;
}
/* 使用偽元素輔助左對齊 */
.container::after {
content: '';
/* 或者flex: 1 */
flex: auto;
}
最終效果如下 GIF：
這兩個方法我合在一個 demo 頁面了，您可以狠狠的點擊這里：flex 子元素寬度不固定最后一行左對齊 demo
四、如果每一行列數不固定
如果每一行的列數不固定，則上面的這些方法均不適用，需要使用其他技巧來實現最后一行左對齊。
這個方法其實很簡單，也很好理解，就是使用足夠的空白標簽進行填充占位，具體的占位數量是由最多列數的個數決定的，例如這個布局最多 7 列，那我們可以使用 7 個空白標簽進行填充占位，最多 10 列，那我們需要使用 10 個空白標簽。
如下 HTML 示意：
相關 CSS 如下，實現的關鍵就是占位的元素寬度和 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;
}
由於元素高度為 0，因此，並不會影響垂直方向上的布局呈現。
最后的效果如下 GIF 圖示：
您可以狠狠地點擊這里：使用空白元素占位讓 flex 布局最后一行左對齊 demo
五、如果列數不固定 HTML 又不能調整
然而有時候，由於客觀原因，前端重構人員沒有辦法去調整 html 結構，同時布局的列表個數又不固定，這個時候該如何實現我們最后一行左對齊效果呢？
我們不妨可以試試使用 Grid 布局。
Grid 布局天然有 gap 間隙，且天然格子對齊排布，因此，實現最后一行左對齊可以認為是天生的效果。
CSS 代碼如下：
.container {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 10px;
}
.list {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 5px;
}
可以看到 CSS 代碼非常簡潔。
HTML 代碼就是非常規整非常普通的代碼片段：
最后的效果如下 GIF：
六、這幾種實現方法點評
首先最后一行需要左對齊的布局更適合使用 CSS grid 布局實現，但是，repeat()函數兼容性有些要求，IE 瀏覽器並不支持。如果項目需要兼容 IE，則此方法需要斟酌。
然后，適用范圍最廣的方法是使用空的元素進行占位，此方法不僅適用於列表個數不固定的場景，對於列表個數固定的場景也可以使用這個方法。但是有些人代碼潔癖，看不慣這種空的占位的 html 標簽，則可以試試一開始的兩個方法，一是動態計算 margin，模擬兩端對齊，另外一個是根據列表的個數，動態控制最后一個列表元素的 margin 值實現左對齊。
累計 6 種方法，各有各的優缺點，大家根據自己項目的實際場景，選擇合適的方法。