方法一
.container { display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 10px; } .list { width: 100px; height:100px; background-color: skyblue; margin-top: 5px; }
HTML代码:
<div class="container"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div>
让CSS flex布局最后一行列表左对齐的N种方法 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
方法二
.container { display: flex; justify-content: space-between; flex-wrap: wrap; } .list { width: 100px; height:100px; background-color: skyblue; margin: 15px 10px 0 0; } .container > i { width: 100px; }
HTML代码:
<div class="container"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <i></i><i></i><i></i><i></i><i></i><i></i> </div>