Flexbox如何实现嵌套双列+单列布局与原生三列布局的间距一致？

实现方案 #

可以通过嵌套Flex布局实现，且完全保留原三列布局的间距规则，无需手动设置margin/padding调整列间距。

核心逻辑

• 外层Flex容器保留原三列布局的display: flex、justify-content: space-between配置，仅将子项从原来的3个（A、B、C）调整为2个：左侧组合容器、C列
• 左侧组合容器的总宽度严格等于原A列宽度 + 原B列宽度 + 原A、B列之间的间距，确保外层space-between计算出的左侧容器与C列的间距和原B、C列间距完全一致
• 左侧组合容器自身设为纵向Flex布局，内部包含顶部D块、底部A+B容器两个子项
• 底部A+B容器沿用display: flex、justify-content: space-between配置，A、B列宽度比例和原布局保持一致，容器宽度和左侧组合容器宽度一致，这样计算出的A、B列间距和原布局完全相同

代码示例

HTML结构

<!-- 外层容器：和原三列布局的外层容器配置完全一致 -->
<div class="container">
  <!-- 左侧组合容器 -->
  <div class="left-wrapper">
    <div class="col-d">D</div>
    <!-- 底部A+B容器 -->
    <div class="ab-wrapper">
      <div class="col-a">A</div>
      <div class="col-b">B</div>
    </div>
  </div>
  <div class="col-c">C</div>
</div>

CSS样式（以原三列每列占外层容器30%为例）

/* 原三列布局外层容器配置直接复用 */
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* C列配置直接复用原布局参数 */
.col-c {
  width: 30%;
}

/* 左侧组合容器宽度 = 原A宽度30% + 原A/B间距5% + 原B宽度30% */
.left-wrapper {
  width: 65%;
  display: flex;
  flex-direction: column;
  /* 纵向D块和A+B容器的间距按需调整，不影响横向列间距 */
  justify-content: space-between;
}

.col-d {
  width: 100%;
  /* D块高度按需设置 */
  min-height: 80px;
}

.ab-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* A、B列宽度为A+B容器的约46.15%，对应原外层容器30%的占比 */
.col-a, .col-b {
  width: 46.15%;
}

适配flex-grow分配宽度的场景

如果你的原布局是通过flex-grow按比例分配列宽而非固定宽度，仅需调整对应参数即可：

• 原三列flex-grow均为1的场景下，左侧组合容器设置flex-grow: 2; flex-basis: 0;，C列保留flex-grow: 1; flex-basis: 0;
• A、B列仍保留flex-grow: 1; flex-basis: 0;配置，无需手动计算宽度比例

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