flex 最後一行左對齊

2021-08-01 00:11:30 字數 1010 閱讀 8338

最近專案布局上要求item兩端對齊,而且最後一行在列不滿的情況下要求左對齊,使用flex的justify-content: space-between;實現時發現最後一行不能左對齊,而是兩端對齊方式,下圖不是專案上想要的效果(不使用flex也可以實現,本文僅討論使用flex實現)

在網上查了很多資料,

1.新增幾個空item(對我來說最有效的,適用於大多數場景)

根據布局列數新增空item,比如每行最大n列,那麼在最後新增n-2個空item即可

2.利於after(適用於每行列數確定的場景)

.box

:after

flex布局,最後一行左對齊

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

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

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

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

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