CSS中flex布局最后一行列表左對(duì)齊的示例

這篇文章主要介紹CSS中flex布局最后一行列表左對(duì)齊的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

引用張?chǎng)涡竦囊黄恼路窒斫o大家，如果你想進(jìn)行修改進(jìn)入鏈接點(diǎn)到對(duì)應(yīng)的圖片生成的鏈接進(jì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;
}

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

行數(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ù)最后一行個(gè)數(shù)確定margin

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

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

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

例如：

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

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

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

.container {
    display: flex;
    /* 兩端對(duì)齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3個(gè)元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2個(gè)元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

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

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

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

這個(gè)就很難處理，但是依舊有解決方法，程序真是越來越有意思。
這個(gè)時(shí)候用上邊的那種方法就比較困難了，因?yàn)閷挾炔还潭ú荒芨鶕?jù)寬度計(jì)算出margin的值

（1）最后一項(xiàng)margin-right：auto；

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* 最后一項(xiàng)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;
}
/* 使用偽元素輔助左對(duì)齊 */
.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少一個(gè)即可!
</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;
}

以上是“CSS中flex布局最后一行列表左對(duì)齊的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！