You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.12 09:30:52