一、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個：
<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>
此時最后一行的小方塊的排列就顯得很尷尬了：
您可以狠狠地點擊這里：最后一行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; } /* 如果最后一行是3個元素 */ .list:last-child:nth-child(4n - 1) { margin-right: calc(24% + 4% / 3); } /* 如果最后一行是2個元素 */ .list:last-child:nth-child(4n - 2) { margin-right: calc(48% + 8% / 3); }
效果如下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: auto; /* 或者flex: 1 */ }
最終效果如下GIF：
這兩個方法我合在一個demo頁面了，您可以狠狠的點擊這里：flex子元素寬度不固定最后一行左對齊demo
四、如果每一行列數不固定
demo地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>讓CSS flex布局最后一行列表左對齊的N種方法</title> <style> .box { width: 80%; height: 90vh; margin: 0 auto; margin-top: 50px; border: 1px solid #000; } .container { width: 100%; /* height: 100%; */ display: flex; flex-wrap: wrap; justify-content: space-between; } .list { width: 22%; height: 120px; background-color: skyblue; margin: 15px 10px 0 10px; text-align: center; color: aliceblue; font-size: 25px; line-height: 120px; } .container>i { width: 22%; margin: 15px 10px 0 10px; } </style> </head> <body> <div class="box"> <div class="container"></div> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> let arrList = [1, 2, 3, 4, 5, 6, 7]; let str = arrList.map((v, i) => `<div class="list">${i + 1}</div>`) $(".container").append(str); // 一行有幾個元素，就放幾個占位元素 let iii = `<i></i><i></i><i></i><i></i>` $(".container").append(iii); </script> </html>
如果每一行的列數不固定，則上面的這些方法均不適用，需要使用其他技巧來實現最后一行左對齊。
這個方法其實很簡單，也很好理解，就是使用足夠的空白標簽進行填充占位，具體的占位數量是由最多列數的個數決定的，例如這個布局最多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，因此，並不會影響垂直方向上的布局呈現。
最后的效果如下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代碼就是非常規整非常普通的代碼片段：
<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>
最后的效果如下GIF：
您可以狠狠地點擊這里：CSS grid布局讓最后一行左對齊demo
六、這幾種實現方法點評
首先最后一行需要左對齊的布局更適合使用CSS grid布局實現，但是，repeat()函數兼容性有些要求，IE瀏覽器並不支持。如果項目需要兼容IE，則此方法需要斟酌。
然后，適用范圍最廣的方法是使用空的元素進行占位，此方法不僅適用於列表個數不固定的場景，對於列表個數固定的場景也可以使用這個方法。但是有些人代碼潔癖，看不慣這種空的占位的html標簽，則可以試試一開始的兩個方法，一是動態計算margin，模擬兩端對齊，另外一個是根據列表的個數，動態控制最后一個列表元素的margin值實現左對齊。
累計6種方法，各有各的優缺點，大家根據自己項目的實際場景，選擇合適的方法。