问答题59题:怎么让CSS flex布局最后一行列表左对齐?

justify-content对齐问题描述

在CSS flex布局中,justify-content属性可以控制列表的水平对齐方式,例如space-between值可以实现两端对齐。

但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。

如下代码:

1.container { 2 display: flex; 3 justify-content: space-between; 4 flex-wrap: wrap; 5} 6.list { 7 width: 24%; height: 100px; 8 background-color: skyblue; 9 margin-top: 15px; 10}
1<div class="container"> 2 <div class="list"></div> 3 <div class="list"></div> 4 <div class="list"></div> 5 <div class="list"></div> 6 <div class="list"></div> 7 <div class="list"></div> 8 <div class="list"></div> 9</div>

预览

怎么让最后一行左对齐呢?

难度:
更新时间:2022-02-27

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!