flex彈性盒布局最后一行左對齊的實(shí)現(xiàn)思路
發(fā)布時間:2020-05-08 15:47:01 作者:不靠譜的作曲家
我要評論

這篇文章主要介紹了flex彈性盒布局最后一行左對齊的實(shí)現(xiàn)思路,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
使用flex布局,如果是九宮格的話正好可以平分,如圖
如果是我們只需要八塊,如圖
但是我們想讓最后一塊左對齊,依次排列,需要在元素的父級增加偽元素after,如圖
<div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } ul:after{ content: ""; width: 32%; } ul li{ width: 32%; height: 10vh; margin-bottom: 1vh; background: #2fbaff; }
到此這篇關(guān)于flex彈性盒布局最后一行左對齊的實(shí)現(xiàn)思路的文章就介紹到這了,更多相關(guān)flex彈性布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
解決flex布局space-between最后一行左對齊的方法
這篇文章主要介紹了解決flex布局space-between最后一行左對齊的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨2020-07-20css3 flex布局 justify-content:space-between 最后一行左對齊
這篇文章主要介紹了css3 flex布局 justify-content:space-between 最后一行左對齊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的2020-01-02讓CSS flex布局最后一行列表左對齊的N種方法(小結(jié))
這篇文章主要介紹了讓CSS flex布局最后一行列表左對齊的N種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編2020-07-23