1、添加几个空item(用于大多数场景)
根据布局列数添加空item,比如每行最大n列,那么在最后添加n个空item即可
<html> <style> .item { width: 32%; background-color: #00abff; height: 60px; margin-top: 10px; } .itemempty { height: 0px; width: 32%; } .box { display: flex; justify-content: space-between; flex-wrap: wrap; } </style> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="itemempty"></div> <div class="itemempty"></div> <div class="itemempty"></div> </div> </body> </html>
2.利于after(适用于每行列数确定的场景)
.box:after { content: ""; flex: auto; }
时间: 2024-11-05 04:54:20