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

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

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

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

問題描述

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

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

行數(shù)固定解決方法

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

樣式如下

方法二根據(jù)最后一行個數(shù)確定margin

由于每一列的數(shù)目都是固定的，因此，我們可以計算出不同個數(shù)列表應(yīng)當(dāng)多大的margin值才能保證完全左對齊。

例如，假設(shè)每行4個元素，結(jié)果最后一行只有3個元素，則最后一個元素的margin-right大小是“列表寬度+間隙大小”的話，那最后3個元素也是可以完美左對齊的。

然后，借助樹結(jié)構(gòu)偽類數(shù)量匹配技術(shù)（這篇文章“偽類匹配列表數(shù)目實現(xiàn)微信群頭像CSS布局的技巧”中的布局技巧就是借助這種技術(shù)實現(xiàn)），我們可以知道最后一行有幾個元素。

例如：

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

在本例中，一行就4個元素，因此，我們可以有如下CSS設(shè)置：

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

呈現(xiàn)的現(xiàn)象如下

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

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

這個就很難處理，但是依舊有解決方法，程序真是越來越有意思。
這個時候用上邊的那種方法就比較困難了，因為寬度不固定不能根據(jù)寬度計算出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)建偽元素并設(shè)置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 */
}

四、如果每一行列數(shù)不固定

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