如何实现首尾列各2行、中间列跨行的响应式Flex网格布局？

需求：创建一个3列Flex网格，首列与末列各包含2行内容，中间列实现跨行效果。此前尝试通过Flex结合position:absolute实现该布局，但存在响应式适配问题。现寻求优化方案：能否仅使用Flexbox完成布局，不依赖position:absolute，同时保证首列与末列的第一行高度相等？

优化后的HTML代码 #

<div class="block">
  <div class="content-wrapper">
    <div class="content grid-container">
      <!-- 左侧列：垂直排列2张卡片 -->
      <div class="column column-left">
        <div class="card--wrapper">
          <div class="card">
            <h3>Lorem Ipsum</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
          </div>
        </div>
        <div class="card--wrapper">
          <div class="card">
            <h3>Lorem Ipsum</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
          </div>
        </div>
      </div>

      <!-- 中间列：跨行的图片 -->
      <div class="column column-middle">
        <div class="image--wrapper">
          <div class="image">
            <img src="/../images/hero-sample.png" alt="image">
          </div>
        </div>
      </div>

      <!-- 右侧列：垂直排列2张卡片 -->
      <div class="column column-right">
        <div class="card--wrapper">
          <div class="card">
            <h3>Lorem Ipsum</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
          </div>
        </div>
        <div class="card--wrapper">
          <div class="card">
            <h3>Lorem Ipsum</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

优化后的CSS代码 #

.block {
  background: green;
}

/* 外层Flex容器：控制三列布局 */
.grid-container {
  display: flex;
  gap: 20px; /* 列之间的间距，可调整 */
  align-items: stretch; /* 确保所有列高度一致 */
}

/* 列容器样式 */
.column {
  display: flex;
  flex-direction: column;
  gap: 18px; /* 左右列内部卡片的间距 */
  flex: 1; /* 三列宽度均分，可根据需求调整比例 */
}

/* 中间列单独样式：确保图片占满高度 */
.column-middle {
  justify-content: center; /* 图片垂直居中，可调整 */
}

.card--wrapper {
  flex: 1; /* 让同一列的卡片自动填充高度，保证第一行卡片高度相等 */
}

h3, p.description {
  color: white;
  font-family: 'Poppins';
}

p.description {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0;
}

h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
}

.card {
  max-width: 240px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255, 0.3);
  height: 100%; /* 确保卡片填充wrapper的高度 */
}

.image--wrapper {
  height: 100%;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

@media screen and (max-width: 1200px) {
  .content-wrapper {
    padding: 60px 25px;
  }
  
  /* 响应式下改为垂直布局 */
  .grid-container {
    flex-direction: column;
  }
  
  .column-middle .image img {
    aspect-ratio: 16/9; /* 调整图片比例，按需修改 */
  }
}

核心优化点 #

• 移除绝对定位：完全通过Flexbox嵌套布局实现三列结构，避免响应式下的定位偏移问题
• 高度自动对齐：左右列的.card--wrapper设置flex:1，结合卡片的height:100%，确保同一行的卡片高度完全一致
• 响应式适配：小屏幕下修改外层容器的flex-direction转为垂直布局，无需额外定位调整
• 灵活比例控制：通过flex:1实现三列宽度均分，可根据需求修改为固定比例（如flex:0 0 30%）

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