响应式Flexbox布局：元素重排实现方案咨询

嘿，我完全理解你的需求——要实现移动端垂直排列（A→B→C）、桌面端左侧上下叠放A和C、右侧单独放置B的响应式布局，而且因为内容是动态的，没法给wrapper固定高度，还不想用position:absolute这种不够优雅的hack方法。

其实CSS Grid是解决这种二维布局需求的绝佳方案，它不需要修改你的现有HTML结构，也完全不需要固定高度，能完美适配动态内容。下面是具体的实现代码：

优化后的CSS代码 #

.wrapper {
  /* 移动端默认垂直排列，保持你原来的Flex写法 */
  display: flex;
  flex-direction: column;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

/* 移动端样式：保持你原来的固定高度，也可改为由内容决定 */
.section-a { 
  background: green; 
  height: 200px; 
}
.section-b { 
  background: yellow; 
  height: 400px; 
}
.section-c { 
  background: blue; 
  height: 200px; 
}

/* 桌面端布局：用Grid实现二维排列 */
@media(min-width: 800px) {
  .wrapper {
    display: grid;
    /* 左侧占1份，右侧占2份，对应33%和66%的比例 */
    grid-template-columns: 1fr 2fr;
    /* 左侧两行平分高度，和右侧B的高度保持一致 */
    grid-template-rows: 1fr 1fr;
    /* 可选：设置最小高度，避免内容太少时布局坍塌 */
    /* min-height: 400px; */
  }
  
  /* 让B跨占左侧的两行，撑满右侧整个高度 */
  .section-b {
    grid-row: 1 / span 2;
    height: auto; /* 覆盖移动端的固定高度，由内容决定高度 */
  }
  
  /* 重置A和C的高度，让Grid自动分配 */
  .section-a, .section-c {
    height: auto;
  }
}

为什么这个方案更优雅？ #

• 完全不需要修改你的原始HTML结构，A、B、C保持同级即可；
• 没有使用任何hack手段，完全依靠Grid的原生布局能力；
• 当B的内容动态变化时，整个wrapper的高度会自动适应，左侧的A和C会自动平分B的高度，完美适配动态内容场景。

如果你坚持想用Flexbox实现，那需要稍微调整HTML结构（把A和C放到一个左侧容器里），具体代码如下：

Flexbox方案（需调整HTML结构） #

修改后的HTML

<div class="wrapper">
  <div class="left-container">
    <div class="section section-a">A</div>
    <div class="section section-c">C</div>
  </div>
  <div class="section section-b">B</div>
</div>

对应的CSS

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

.left-container {
  display: flex;
  flex-direction: column;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

.section-a { background: green; height: 200px; }
.section-b { background: yellow; height: 400px; }
.section-c { background: blue; height: 200px; }

@media(min-width: 800px) {
  .wrapper {
    flex-direction: row;
  }
  
  .left-container {
    flex-basis: 33%;
    flex-direction: column;
    /* 让A和C平分左侧容器的高度 */
    justify-content: stretch;
  }
  
  .section-b {
    flex-basis: 66%;
    height: auto;
  }
  
  .section-a, .section-c {
    flex: 1;
    height: auto;
  }
}

不过相比之下，Grid方案不需要改动HTML，更符合你想要的“优雅”需求，推荐优先使用~

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