本文详解如何通过 display: flex 与 flex-wrap、flex-basis 和嵌套 flex 容器协同工作，使特定子元素在换行布局中占据两行高度（即视觉上横跨两行），同时保持整体流式响应特性。
本文详解如何通过 display: flex 与 flex-wrap、flex-basis 和嵌套 flex 容器协同工作，使特定子元素在换行布局中占据两行高度（即视觉上横跨两行），同时保持整体流式响应特性。
在 Flexbox 布局中，单个元素“跨越两行”并非直接通过 row-span（那是 Grid 的能力）实现，而是通过控制其宽度（flex-basis）和容器换行行为（flex-wrap: wrap），结合嵌套 Flex 结构，让该元素在换行后独占一整行，并在视觉/结构上形成“覆盖两行”的效果——尤其适用于侧边栏+主内容+通栏底部模块等典型三段式响应布局。
核心思路如下：
- 外层容器设为 display: flex; flex-wrap: wrap，允许子项折行；
- 将布局划分为逻辑区块（如左栏、右栏、底部通栏），各区块自身也是 display: flex 容器，便于内部精细化控制；
- 关键元素（如图中橙色区域内的 .c8）通过增大其 flex 比例（如 flex: 2）或显式设置 flex-basis: 100%，使其在所在行中占据更宽空间，配合父区块的 flex-wrap，自然推挤相邻元素至下一行，从而实现“跨行占位”。
以下是可直接运行的完整示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 800px;
height: 600px;
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐添加，提升可维护性 */
}
/* 每个逻辑区块自身也是 Flex 容器 */
.container > div {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.bdr {
border: 2px solid #000;
box-sizing: border-box;
}
.left {
background: lightgreen;
flex-basis: 50%;
}
.right {
background: skyblue;
flex-basis: 50%;
}
.bottom {
background: orange;
flex-basis: 100%; /* 确保通栏区块独占一行 */
}
/* 左栏内：4个等宽子项 */
.left > .bdr {
flex: 1 48%; /* 48% 预留间隙，避免换行错位 */
}
/* 右栏内：仅1个子项，填满 */
.right > .bdr {
flex: 1;
}
/* 底部栏内：3个子项，其中 c8 占双倍宽度 */
.bottom > .bdr {
flex: 1;
}
.bottom .c8 {
flex: 2; /* 相当于占据约 2/4 = 50% 宽度，其余两个各占 25%，三者总和触发换行 */
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="bdr c1" style="height: 80px;"></div>
<div class="bdr c2" style="height: 80px;"></div>
<div class="bdr c3" style="height: 80px;"></div>
<div class="bdr c4" style="height: 80px;"></div>
</div>
<div class="right">
<div class="bdr c5" style="height: 320px;"></div>
</div>
<div class="bottom">
<div class="bdr c6" style="height: 80px;"></div>
<div class="bdr c7" style="height: 80px;"></div>
<div class="bdr c8" style="height: 80px;"></div>
</div>
</div>
</body>
</html>✅ 关键要点总结：
- flex-basis: 100% 是实现“通栏区块”的基础，确保其强制换行并独占一行；
- 嵌套 Flex 容器（.left, .right, .bottom）赋予各区域独立的弹性布局能力；
- flex: 2 并非让元素物理跨越两行，而是通过相对宽度膨胀 + 父容器 flex-wrap，使该元素与其同行其他项无法共存，从而“挤出”下一行，形成跨行视觉效果；
- 务必设置 box-sizing: border-box 和合理 gap，避免因边框/间距导致计算溢出而意外换行；
- 若需更精确的行列控制（如严格定义“第2行第2列跨2行”），建议改用 CSS Grid —— Flexbox 擅长一维流式布局，“跨行”本质是宽度驱动的换行策略，非原生二维定位。
该方案兼容所有现代浏览器，无需 JavaScript，语义清晰，易于响应式扩展（例如在小屏下将 .left 和 .right 的 flex-basis 改为 100% 即可堆叠）。
