Flexbox布局问题:如何将最后一项移至上一行空缺位置
问题描述
请查看以下代码了解详情,也可参考附图以更清晰理解。附图可见,最后一行有两个列表项,第二行存在一处空缺,需将其中一个列表项移至该空缺位置。
CSS 代码
.main { max-width: 900px; padding: 20px; margin: 0 auto; background-color: aqua; } .main_inner { display: flex; border: 1px solid black; flex-wrap: wrap; } .list { min-width: 250px; border: 1px solid #fff; background-color: black; color: #fff; padding: 15px; }
HTML 代码
<div class="main"> <div class="main_inner"> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> </div> <div class="main_inner"> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> <div class="list">List</div> </div> <div class="main_inner"> <div class="list">List</div> <div class="list">List</div> </div>
参考图示

内容的提问来源于stack exchange,提问作者Arunraj S
相关产品推荐
相关产品推荐

