如何在自适应宽高的flex容器中排列不同高度的子div？

嘿，我完全懂你的困扰！常规的flex-wrap和justify-content确实常和固定尺寸容器绑定，但要实现自适应宽度的flex容器+自定义子元素排列，其实可以通过嵌套flex容器或者精准控制flex-basis来搞定，不用给容器硬设高度。

我分两种常见的图示场景给你解决方案，你可以对应自己的需求调整：

场景1：左侧单个元素占满高度，右侧两个元素垂直排列 #

如果你的图示是红色div在左侧（高度等于右侧两个元素的总和），右侧上下排列蓝、绿两个div，那用嵌套flex的方式最稳妥：

代码示例 #

<div class="outer-container">
  <div class="red-box">红色内容</div>
  <div class="right-column">
    <div class="blue-box">蓝色内容</div>
    <div class="green-box">绿色内容</div>
  </div>
</div>

.outer-container {
  display: flex;
  /* 不设置宽度，容器自动适配子元素总宽度 */
  gap: 15px; /* 可选，元素间的间距 */
}

.red-box {
  background: #ff4444;
  align-self: stretch; /* 让红色box自动撑满外层容器高度 */
  padding: 20px;
}

.right-column {
  display: flex;
  flex-direction: column; /* 右侧元素垂直排列 */
  gap: 15px;
}

.blue-box, .green-box {
  padding: 20px;
}

.blue-box { background: #33b5e5; }
.green-box { background: #99cc00; }

原理说明 #

外层flex容器没有固定宽度，会自动计算左侧红色box和右侧列的宽度总和，实现自适应。右侧列用垂直flex排列，让两个元素上下分布，红色box通过align-self: stretch自动匹配右侧列的总高度，完美贴合你的布局需求。

场景2：第一个元素独占一行，后两个元素平分宽度 #

如果你的图示是红色div占满第一行，蓝、绿div在第二行各占一半宽度，那直接用flex-wrap+flex-basis就能实现：

代码示例 #

<div class="outer-container">
  <div class="red-box">红色内容</div>
  <div class="blue-box">蓝色内容</div>
  <div class="green-box">绿色内容</div>
</div>

.outer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /* 不设宽度，容器宽度由第一行的红色box决定 */
}

.red-box {
  flex-basis: 100%; /* 强制独占一行 */
  background: #ff4444;
  padding: 20px;
}

.blue-box, .green-box {
  flex: 1; /* 平分剩余宽度 */
  padding: 20px;
}

.blue-box { background: #33b5e5; }
.green-box { background: #99cc00; }

原理说明 #

flex-basis: 100%让红色box占满一行，触发flex-wrap: wrap换行，外层容器的宽度会自动适配红色box的内容宽度，后两个元素通过flex:1平分换行后的可用空间，完全不需要固定容器尺寸。

通用思路 #

不管你的具体图示是什么，核心都是这两点：

• 不给外层flex容器设置固定宽度/高度，让它靠子元素的尺寸自动撑开
• 用嵌套flex容器、flex-basis、align-self这些属性来控制子元素的排列规则，替代依赖固定容器的justify-content/align-items组合

如果你的图示是其他布局，比如第二行元素居中排列，只需要给第二行的元素加flex-basis:100%，再给外层容器加justify-content:center就行，容器依然会自适应宽度。

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