【CSS】364- 讓CSS flex布局最後一行左對齊的N種方法

  • 2019 年 10 月 11 日
  • 筆記

一、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

四、如果每一行列數不固定

如果每一行的列數不固定，則上面的這些方法均不適用，需要使用其他技巧來實現最後一行左對齊。

這個方法其實很簡單，也很好理解，就是使用足夠的空白標籤進行填充佔位，具體的佔位數量是由最多列數的個數決定的，例如這個布局最多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種方法，各有各的優缺點，大家根據自己項目的實際場景，選擇合適的方法。

如果你有其他更好的實現，也歡迎反饋與交流，我會及時在文中更新。

作者：張鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

VirMach 便宜 VPS

QNews

QNews