如何修改SCSS Flexbox布局代码实现目标排版（无需关注颜色）

AI 小北

2026-11-14

布局修正方案

问题根源

当前代码存在两个核心错误：一是B、C块直接放在横向排布的flex容器中，被强制横向排列，没有做纵向堆叠的分组；二是大量选择器没有对应HTML元素，属于完全无效的样式代码，干扰布局逻辑。

具体修改动作

调整HTML结构，新增.middle-wrapper包裹层，把B、C两个块归入这个容器内，形成「左侧A块 → 中间上下堆叠区 → 右侧D块」的三列横向结构
清除所有无效样式：删除没有匹配HTML元素的nav、main选择器规则，移除.container上无实际作用的flex:1、justify-content: center配置
给.middle-wrapper设置纵向flex方向，让内部的B、C自动上下排布，总高度和左右的A、D块保持一致
把B、C块上写死的300px固定宽度改为100%，让两个块完全撑满中间容器的宽度，避免宽度逻辑冲突

修改后的完整代码

HTML结构

<body>
  <div class="container">
    <div class="A">
      <p>div klasy A</p>
    </div>
    <!-- 新增中间堆叠区包裹容器 -->
    <div class="middle-wrapper">
      <div class="B">
        <p>div klasy B</p>
      </div>
      <div class="C">
        <p>div klasy C</p>
      </div>
    </div>
    <div class="D">
      <p>div klasy D</p>
    </div>
  </div>
</body>

CSS样式

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  display: flex;
  align-items: flex-start;
}

.A {
  background-color: red;
  width: 300px;
  height: 700px;
}

.middle-wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.B {
  background-color: wheat;
  height: 350px;
  width: 100%;
}

.C {
  background-color: lightblue;
  height: 350px;
  width: 100%;
}

.D {
  background-color: green;
  width: 300px;
  height: 700px;
}

p {
  text-align: center;
}