如何通过CSS Flex实现响应式布局下列跨度转行跨度

当然可以！咱们基于你现有的HTML结构，用CSS Grid + 媒体查询就能搞定，完全不用依赖position: absolute，维护起来也更顺畅。

核心实现思路 #

• 桌面端：保留你原来的Flex布局逻辑，通过让block1撑满容器高度实现列跨度效果
• 移动端：切换为CSS Grid布局，利用display: contents让原有row容器不影响网格布局，再通过grid-row属性直接定义block3跨两行，完美实现行跨度的视觉效果

完整代码实现 #

HTML结构（和你的原始代码完全一致，无需修改）

<h1>column span on Desktop</h1>
<div class="wrapper">
  <div class="row">
    <div class="block block1 col-span">1</div>
  </div>
  <div class="row">
    <div class="block block2">2</div>
    <div class="block block3">3</div>
  </div>
</div>

CSS样式（响应式适配，移除绝对定位）

/* 基础通用样式 */
.wrapper {
  display: flex;
  margin-bottom: 30px;
}

.row {
  display: flex;
  flex-direction: column;
}

.block {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block1 { background-color: cadetblue; }
.block2 { background-color: cornflowerblue; }
.block3 { background-color: beige; }

/* 桌面端：列跨度效果（保留你的原有逻辑） */
@media (min-width: 768px) {
  .col-span {
    height: 100%; /* 撑满wrapper高度，实现列跨度视觉效果 */
  }
}

/* 移动端：行跨度效果（无绝对定位，用Grid重构） */
@media (max-width: 767px) {
  .wrapper {
    display: grid;
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px 50px;
  }
  
  /* 让row容器不参与布局，直接让子元素成为Grid的子项 */
  .row {
    display: contents;
  }
  
  .block1 {
    grid-column: 2;
    grid-row: 1;
  }
  
  .block2 {
    grid-column: 2;
    grid-row: 2;
  }
  
  /* 让block3跨两行，实现行跨度 */
  .block3 {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

方案优势 #

1. 零绝对定位：彻底避免了定位带来的布局偏移、层级冲突等维护隐患
2. HTML结构不变：完全复用你现有的结构，无需新增或删除DOM元素
3. 语义化更强：移动端用Grid原生的跨行列属性，逻辑清晰，后续修改跨度规则只需要调整grid-row/grid-column的值即可

内容的提问来源于stack exchange，提问作者Chunbin Li