Flexbox嵌套布局问题：子容器无法垂直排列至主容器下方

问题根源 #

你的父容器.container-wrap默认采用flex-direction: row（Flexbox默认横向排列），所有直接子元素会在同一行展示，这就是container-main2跑到右侧和其他容器并排的原因。另外你尝试设置上下边距没用，是因为父容器的横向布局限制了子元素的纵向空间分配。

解决方案 #

把需要上下排列的container-main和container-main2嵌套到一个新的纵向flex容器中，让这个新容器作为.container-wrap的子元素，这样中间区域就能纵向排列，左右侧边栏保持横向分布。

修改后的完整代码 #

CSS部分

.container-wrap {
  display: flex;
  justify-content: center;
  gap: 10px; /* 给子容器之间加间距，替代内部padding的冗余 */
}

.container-leftbar {
  display: flex;
  height: 100%;
  gap: 10px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: fit-content;
}

/* 新增中间容器，负责纵向排列两个main容器 */
.container-middle {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占据左右侧边栏之外的剩余空间 */
  gap: 10px;
}

.container-main {
  display: flex;
  height: 100%;
  gap: 10px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container-main2 {
  display: flex;
  height: 100%;
  gap: 10px;
  padding: 10px;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.container-rightbar {
  display: flex;
  height: 100%;
  gap: 10px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: fit-content;
}

HTML部分

<!--flex wrap-->
<div class="container-wrap">
  <!--left column-->
  <div class="container-leftbar">
    <div class="1a">123</div>
    <div class="1b">123</div>
    <div class="1c">123</div>
  </div>
  <!--中间区域容器，包裹两个main容器-->
  <div class="container-middle">
    <!--1 middle body-->
    <div class="container-main">
      <div class="2a">123</div>
      <div class="2b">123</div>
    </div>
    <!--2 middle body-->
    <div class="container-main2">
      <div class="3a">123</div>
      <div class="3b">123</div>
    </div>
  </div>
  <!--right column-->
  <div class="container-rightbar">
    <div class="3a">123</div>
    <div class="3b">123</div>
    <div class="3c">123</div>
  </div>
</div>

额外说明 #

• 移除了container-leftbar和container-main的flex:1，把这个属性移到新的.container-middle上，确保中间区域能合理占据剩余空间
• 在.container-wrap中添加gap:10px，统一控制子容器之间的间距，避免重复设置padding导致布局混乱

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