本文详解如何利用 display: flex 与 flex-wrap 配合 flex-basis 和嵌套 Flex 容器，实现一行内多元素自动换行、且指定区域（如底部栏）中某个子元素横向跨越两行的布局效果。
本文详解如何利用 `display: flex` 与 `flex-wrap` 配合 `flex-basis` 和嵌套 flex 容器，实现一行内多元素自动换行、且指定区域（如底部栏）中某个子元素横向跨越两行的布局效果。
在现代 CSS 布局中，Flexbox 虽以一维布局见长，但通过嵌套 Flex 容器 + 合理设置 flex-basis 和 flex 缩放规则，完全可以实现类似“某元素占满两行宽度”的视觉效果——关键不在于让单个元素物理上跨行（Flex 本身不支持 rowspan），而是在父容器换行逻辑下，使目标子元素独占整行宽度，从而自然占据两行（或更多）的垂直空间。
以下是一个典型结构：整体为三栏式分区（左区、右区、底区），其中底区包含三个子项，要求第三个子项（.c8）宽度为其他两项之和（即 2× 单位宽度），使其在换行时“推挤”出第二行空间：
.container {
width: 800px;
height: 600px;
display: flex;
flex-wrap: wrap; /* 允许主轴换行 */
}
/* 每个逻辑区块自身也是 Flex 容器，支持内部换行 */
.container > div {
display: flex;
flex-wrap: wrap;
}
.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 0 48%; /* flex-grow: 1, flex-shrink: 0, flex-basis: 48% → 两列布局 */
margin: 1%;
}
/* 右区内单个子项，填满可用空间 */
.right > .bdr {
flex: 1;
}
/* 底区：3 个子项，前两个等宽，第三个占双倍宽度 */
.bottom > .bdr {
flex: 1;
}
.bottom .c8 {
flex: 2; /* 相对权重为 2 → 占据约 2/4 = 50% 总宽，而 c6/c7 各占 ~25% */
}
对应 HTML 结构如下：
<div class="container">
<div class="left">
<div class="bdr c1"></div>
<div class="bdr c2"></div>
<div class="bdr c3"></div>
<div class="bdr c4"></div>
</div>
<div class="right">
<div class="bdr c5"></div>
</div>
<div class="bottom">
<div class="bdr c6"></div>
<div class="bdr c7"></div>
<div class="bdr c8"></div>
</div>
</div>
✅ 核心要点总结：
- 使用 flex-wrap: wrap 是实现“空间不足即换行”的前提；
- flex-basis 控制初始主轴尺寸（如 50% / 100%）决定区块是否换行；
- 嵌套 .bottom 作为独立 Flex 容器，使其内部子项按比例分配宽度，.c8 的 flex: 2 使其在换行后“撑开”第二行空间；
- 注意添加 box-sizing: border-box 和合理 margin，避免因边框/内边距导致换行异常；
- 若需更强的二维控制（如精确行列对齐、跨行跨列），推荐升级至 display: grid，但本例中 Flexbox 完全胜任，语义清晰、兼容性好（支持 IE10+）。
该方案兼顾语义化、可维护性与响应能力，是 Flexbox 高级用法的典型实践。
