CSS——flex布局最后一行列表左對齊的N種方法

一、flex布局最后一行列表左對齊的N種方法

效果展示：

如果每一行列數是固定的

如果每一行列數是固定的，則下面兩種方法可以實現最后一行左對齊。

方法一：

也就是我們不使用justify-content:space-between聲明在模擬兩端對齊效果。中間的gap間隙我們使用margin進行控制。

<div class="container-1">
            <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>

.container-1 {
            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值才能保證完全左對齊。

.list:last-child:nth-child(4n - 1)說明最后一行，要么3個元素，要么7個元素……

.list:last-child:nth-child(4n - 2)說明最后一行，要么2個元素，要么6個元素……

<div class="container-2">
            <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>

.container-2 {
            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);
            }
        }

如果每一行列數不固定

效果展示：

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

這個方法其實很簡單，也很好理解，就是使用足夠的空白標簽進行填充占位，具體的占位數量是由最多列數的個數決定的，例如這個布局最多7列，那我們可以使用7個空白標簽進行填充占位，最多10列，那我們需要使用10個空白標簽。

 

<div class="container-3">
            <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>

.container-3 {
            width: 400px;
            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;
            }
            /* i和列表一樣的寬度和margin值 */
            & > i {
                width: 100px;
                margin-right: 10px;
            }
        }

如果列數不固定HTML又不能調整

然而有時候，由於客觀原因，前端重構人員沒有辦法去調整html結構，同時布局的列表個數又不固定，這個時候該如何實現我們最后一行左對齊效果呢？

我們不妨可以試試使用Grid布局。

Grid布局天然有gap間隙，且天然格子對齊排布，因此，實現最后一行左對齊可以認為是天生的效果。

repeat()函數兼容性有些要求，IE瀏覽器並不支持

<div class="container-4">
            <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>

.container-4 {
            width: 400px;
            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;
            }
        }