Flex布局flex-wrap换行与堆叠排列实现问题求助

你当前使用的单层flex-wrap方案无法实现目标效果：Flex布局会沿主轴按顺序排列直接子元素，开启换行后，第一行放完66%宽度的红色块后，剩余水平空间仅能容纳第一个33%宽度的蓝色块，第三个黄色块会直接掉到第二行最左侧，无法自动排布到蓝色块下方的垂直空间里。

方案1：CSS Grid（最推荐，适配需求最完美） #

Grid是专门为二维布局设计的属性，不需要额外嵌套元素，天然支持高度自适应、自动按空间排布，代码最简洁。
核心逻辑：

• 容器定义为两列布局，宽度比例2:1（刚好对应66%、33%的占比需求，也可以直接写百分比值）
• 给大尺寸div设置grid-row: span 2，让它跨2行轨道，两个小div会自动填充第二列的上下两个轨道位置
• 所有元素高度默认由内容自动撑开，不需要写死高度值
• 加gap属性控制块间距，避免宽度溢出

示例代码：

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 8px;">
  <!-- 大尺寸块 -->
  <div style="grid-row: span 2; background-color: red;">
    大尺寸块内容，高度随内容自动撑开
  </div>
  <!-- 小尺寸块1 -->
  <div style="background-color: blue;">
    第一个小尺寸块内容
  </div>
  <!-- 小尺寸块2 -->
  <div style="background-color: yellow;">
    第二个小尺寸块内容
  </div>
</div>

如果需要小屏幕下自动换行成单列布局，只需要加一行媒体查询，在屏幕宽度小于阈值时把grid-template-columns设为1fr即可。

方案2：嵌套Flex布局（兼容更老的浏览器场景） #

如果你需要兼容不支持Grid的旧浏览器，可以用嵌套Flex的方式实现，核心逻辑是把两个右侧小div包裹在一个单独的父容器里，作为外层Flex的一个子项，父容器内部用纵向Flex排列两个小div。
示例代码：

<div style="display: flex; flex-wrap: wrap; gap: 8px;">
  <!-- 大尺寸块 -->
  <div style="flex: 0 0 calc(66% - 4px); background-color: red;">
    大尺寸块内容，高度随内容自动撑开
  </div>
  <!-- 右侧小块的父容器 -->
  <div style="flex: 0 0 calc(34% - 4px); display: flex; flex-direction: column; gap: 8px;">
    <div style="background-color: blue;">
      第一个小尺寸块内容
    </div>
    <div style="background-color: yellow;">
      第二个小尺寸块内容
    </div>
  </div>
</div>

外层Flex开启flex-wrap: wrap后，当可用宽度不足时，右侧的父容器会自动整体掉到下一行，满足自动换行的需求。

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