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

2021-10-01 01:57:35 字數 2684 閱讀 2757

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

//html

="container"

>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

<

/div>

//css

.container

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

方法一 用margin 模擬縫隙

比如.container

.list

.list:

not(

:nth-

child

(4n)

)

樣式如下

方法二 根據最後一行個數確定margin

由於每一列的數目都是固定的,因此,我們可以計算出不同個數列表應當多大的margin值才能保證完全左對齊。

例如,假設每行4個元素,結果最後一行只有3個元素,則最後乙個元素的margin-right大小是「列表寬度+間隙大小」的話,那最後3個元素也是可以完美左對齊的。

例如:.list:last-child:nth-child(4n - 1)說明最後一行,要麼3個元素,要麼7個元素……

.list:last-child:nth-child(4n - 2)說明最後一行,要麼2個元素,要麼6個元素……

在本例中,一行就4個元素,因此,我們可以有如下css設定:

.container 

.list

/* 如果最後一行是3個元素 */

.list:last-child:nth-

child

(4n -1)

/* 如果最後一行是2個元素 */

.list:last-child:nth-

child

(4n -2)

呈現的現象如下

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

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

這個就很難處理,但是依舊有解決方法,程式真是越來越有意思。

這個時候用上邊的那種方法就比較困難了,因為寬度不固定不能根據寬度計算出margin的值

(1)最後一項margin-right:auto;

.container 

.list

/* 最後一項margin-right:auto */

.list:last-child

(2)建立偽元素並設定flex:auto或flex:1

.container 

.list

/* 使用偽元素輔助左對齊 */

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

//html**:

="container"

>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

="list"

>

<

/div>

<

/i>

<

/i>

<

/i>

<

/i>

<

/i>

<

/i>

//比div少乙個即可!

oracle 一行列轉換問題

a表 c1 c2 22 a 25 b 26 c 46 d b表 c3 c4 1 22,25,26,46,結果 tb c3 ta c2 1 a,b,c,d 分析 從結果可以看出來,這是乙個將行資料轉換為列資料的問題,可以根據b表中的c4列來連線a,b兩個表 現在的首要問題是,將b表中的c4列轉換為4個...

flex布局,最後一行靠左顯示

flex布局,最後一行靠左顯示 最後一行靠左顯示 設定為伸縮盒子 display flex 設定主軸方向 flex direction row 豎立顯示 flex direction column flex direction row reverse flex direction column re...

flex布局,最後一行左對齊

擁抱flex 網上查詢資料解決辦法都是運算元據,個人感覺css問題還是用css來解決 當然問題不同,解決方案不同,這裡只是針對某個問題的解決方法,不能解決所有問題,大家視情況而定,如果還是不行歡迎溝通。父級css屬性 因為justify content flex start 為預設屬性,所以 只需要...