求助：使用Flexbox实现固定宽列+可折叠中间列的CSS布局方案

核心思路是用外层flex容器控制三列的排列逻辑，同时给中间的黄色flex容器设置合理的flex属性，让它在空间不足时自动压缩，从而触发内部子项的换行。具体实现如下：

结构与代码示例 #

HTML结构 #

<div class="container">
  <div class="red">红色固定列</div>
  <div class="yellow">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <!-- 可添加更多正方形子项 -->
  </div>
  <div class="blue">蓝色固定列</div>
</div>

CSS样式 #

/* 外层容器：控制三列横向排列 */
.container {
  display: flex;
  width: 100%;
  gap: 12px; /* 可选：列之间的间距，按需调整 */
}

/* 左右固定宽度列：禁止压缩，保持宽度不变 */
.red, .blue {
  width: 200px; /* 替换为你需要的固定宽度值 */
  flex-shrink: 0;
  background: red; /* 示例背景色 */
}

/* 中间黄色flex容器：可拉伸可压缩，触发内部换行 */
.yellow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 962px;
  flex: 1 1 auto; /* 关键：允许拉伸占满剩余空间，也允许压缩 */
  gap: 8px; /* 正方形之间的间距 */
  background: #fff2cc; /* 示例背景色 */
}

/* 等大正方形子项：保持正方形比例，自动适配行数 */
.square {
  flex: 0 0 calc(25% - 6px); /* 示例：每行4个，减去gap的宽度 */
  aspect-ratio: 1 / 1; /* 强制正方形比例 */
  background: yellow;
}

关键属性说明 #

1. 外层.container的display:flex：让三列默认横向排列，是整个布局的基础。
2. .red和.blue的flex-shrink:0：禁止这两列被压缩，确保始终保持固定宽度，不会挤压中间区域。
3. .yellow的flex:1 1 auto：
   • flex-grow:1：当页面宽度足够时，中间容器会占满左右列之外的剩余空间，但受限于max-width:962px不会无限拉伸。
   • flex-shrink:1：当页面宽度小于「左列宽度+962px+右列宽度」时，中间容器会被压缩，宽度小于962px，此时内部的flex-wrap:wrap就会触发，正方形子项自动换行。
4. .square的aspect-ratio:1/1：无需手动设置宽高，直接保持正方形比例，适配不同的容器宽度。

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