如何使用CSS Flex实现第二行仅跨第2、3列的布局

实现方案 #

核心思路 #

Flex是一维布局，原生不支持跨行/跨列的布局能力，你可以通过调整DOM结构实现需求：把原来第2、3列的所有内容打包成一个独立的右列容器，和左侧的高图片列平级，这样左侧列的高度不会干扰右侧内容排版，也不会额外占用垂直空间。
右侧容器内部用垂直flex布局，第一层放原来的「列2第一行」和「列3第一行」两个横向排列的模块，第二层直接放需要跨两列的内容，自然就会排在两个模块的下方，自动适配列3第一行内容的不固定高度。

调整后的代码 #

CSS

/* 保留你原有的基础样式逻辑，新增/修改以下内容 */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  border: 2.5px solid blue;
  margin: 5px 5px 5px 5px;
  box-sizing: border-box; /* 避免border撑宽容器 */
}

.column {
  display: flex;
  flex-direction: column;
  border: 2.5px solid black;
  margin: 5px 5px 5px 5px;
  box-sizing: border-box;
}

/* 左侧高图片列 */
.left-column {
  width: 45%;
  min-height: 300px; /* 模拟高图片的高度，可替换为你自己的图片样式 */
}

/* 右侧2、3列整体容器 */
.right-wrapper {
  flex: 1; /* 占满剩余宽度 */
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制行间距 */
  margin: 5px;
}

/* 右侧第一行的两个小列容器 */
.right-top-row {
  display: flex;
  gap: 10px; /* 控制列间距 */
}

/* 右侧顶部的两个等宽小列 */
.right-top-col {
  flex: 1;
  border: 2.5px solid black;
  padding: 10px;
  box-sizing: border-box;
}

/* 跨两列的内容模块 */
.double-span-content {
  border: 2.5px solid red;
  padding: 10px;
  box-sizing: border-box;
}

HTML

<!---- Header ---->
<header style="padding:0px 0px 0px 0px !important;">
</header>
<!---- Header end ---->
<div class="clear"></div>
<!--content area-->
<div class="project_area">
  <div style="width: 100%;">
    <div class="row">
      <!-- 左侧高图片列 -->
      <div class="column left-column">
        列1 高图片内容
      </div>

      <!-- 右侧2、3列整体容器 -->
      <div class="right-wrapper">
        <!-- 右侧第一行：两个小列 -->
        <div class="right-top-row">
          <div class="right-top-col">
            列2 第一行内容
          </div>
          <div class="right-top-col">
            列3 第一行内容<br>
            支持高度不固定<br>
            加多少内容都会把下方的跨列模块往下推
          </div>
        </div>
        <!-- 跨两列的内容 -->
        <div class="double-span-content">
          跨第2、3列的内容，自动排在右侧第一行内容的下方
        </div>
      </div>

    </div>
    <div class="clear"></div>
  </div>
</div>

效果说明 #

• 左侧列高度无论多高，右侧内容都不会跑到左侧下方，不会额外占用垂直空间
• 跨列内容宽度自动适配右侧两个小列的总宽度，且永远排在右侧第一行两个模块的下方，完全适配列3第一行内容高度不固定的需求

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