这篇文章将为大家详细讲解有关flex弹性盒布局最后一行左对齐怎么实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
使用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;
}

关于“flex弹性盒布局最后一行左对齐怎么实现”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。