讓CSS flex布局最后一行列表左對齊的N種方法(小結)

發(fā)布時間：2020-07-23 16:21:52 作者：lbchenxy

我要評論

這篇文章主要介紹了讓CSS flex布局最后一行列表左對齊的N種方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

引用張鑫旭的一篇文章分享給大家，如果你想進行修改進入鏈接點到對應的圖片生成的鏈接進入，方可修改。

問題描述

//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: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

這種情況明顯與我們想要的情況不同。

行數固定解決方法

方法一用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);
}

呈現的現象如下

即使你做了刪除操作，依舊是完好的樣式。這一點很佩服

方法三如果子元素的寬度不固定

這個就很難處理，但是依舊有解決方法，程序真是越來越有意思。
這個時候用上邊的那種方法就比較困難了，因為寬度不固定不能根據寬度計算出margin的值

（1）最后一項margin-right：auto；

.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;
}

（2）創(chuàng)建偽元素并設置flex:auto或flex:1

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* 使用偽元素輔助左對齊 */
.container::after {
    content: '';
    flex: auto;    /* 或者flex: 1 */
}

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

//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><i></i>//比div少一個即可!
</div>
//CSS代碼：
.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;
}
.container > i {
    width: 100px;
    margin-right: 10px;
}