如何在不为flex容器设置固定高度时实现flex项换行？

我有一个flex容器，里面包含多个高度随内容变化的flex项。因为没法预知最高项的高度，不能给容器设置固定高度，但希望flex项能自动换行。

我不想硬编码指定哪些项放在哪一列，毕竟项的高度和数量都不固定，会随渲染的数据变化而增减。

补充说明：此问题不是泛泛的“如何创建瀑布流布局”，而是要让flex容器高度适配最高子元素，通过让项尽早换行来使容器尽可能短。

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.stuff {
  height: 50px;
  background-color: #add8e6;
}

/* How do I make this container be as short as possible by making the items wrap eagerly? */
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  width: 100px;
  background-color: #f00;
}

p {
  font-family: sans-serif;
}

<div class="page">
  <div class="stuff"></div>
  <div class="stuff"></div>
  <p>👇 The below items should wrap as early as possible so that the container is as short as possible</p>
  <div class="container">
    <div class="item" style="height: 84.2100389510485px;"></div>
    <div class="item" style="height: 191.92293493979756px;"></div>
    <div class="item" style="height: 173.77855481317093px;"></div>
    <div class="item" style="height: 191.53106857845174px;"></div>
    <div class="item" style="height: 25.255845195229462px;"></div>
    <div class="item" style="height: 139.09297679242505px;"></div>
    <div class="item" style="height: 151.36271062612596px;"></div>
    <div class="item" style="height: 95.27193455143049px;"></div>
    <div class="item" style="height: 168.37033024481275px;"></div>
    <div class="item" style="height: 161.5719425642975px;"></div>
  </div>
  <div class="stuff"></div>
  <div class="stuff"></div>
</div>

Flex布局在flex-direction: column且flex-wrap: wrap的模式下，必须依赖容器的固定高度才能触发换行——浏览器需要明确“什么时候该换行”的阈值，但你的场景没法提前设置高度，所以纯Flex方案直接走不通，这里给两种可行思路：

1. CSS Grid 自动列填充（推荐） #

Grid布局天生更适配这种“自动适配高度、尽早换行”的需求，无需固定容器高度，浏览器会自动计算最优列数，容器高度由最高的一列决定：

修改.container的CSS代码：

.container {
  display: grid;
  /* 自动创建不超过容器宽度的100px宽列 */
  grid-template-columns: repeat(auto-fill, 100px);
  gap: 10px;
  /* 让容器宽度自适应内容，可选，根据你的布局调整 */
  width: fit-content;
  /* 居中容器，和原page的align-items配合 */
  margin: 0 auto;
}

.item {
  width: 100px;
  background-color: #f00;
}

这种纯CSS方案无需JS，能完美满足“项自动换行、容器高度尽可能短”的要求，且适配数据动态变化的场景。

2. JavaScript 动态计算容器高度（兼容Flex场景） #

如果必须保留Flex布局，可以通过JS计算所有项的高度，结合容器宽度算出最优列数，再给容器设置对应高度触发换行：

添加以下JS代码：

const container = document.querySelector('.container');
const items = Array.from(container.querySelectorAll('.item'));
const itemWidth = 100; // 对应.item的宽度
const gap = 10; // 对应.container的gap值

function adjustContainerHeight() {
  const containerWidth = container.offsetWidth;
  // 计算最多能容纳的列数
  const maxColumns = Math.floor(containerWidth / (itemWidth + gap));
  if (maxColumns <= 1) {
    container.style.height = '';
    return;
  }

  // 计算每一列的总高度
  const columnHeights = new Array(maxColumns).fill(0);
  items.forEach((item, index) => {
    const colIndex = index % maxColumns;
    columnHeights[colIndex] += item.offsetHeight + gap;
  });

  // 设置容器高度为最高列的高度，减去最后一个gap（避免多余间距）
  const targetHeight = Math.max(...columnHeights) - gap;
  container.style.height = `${targetHeight}px`;
}

// 初始化执行
adjustContainerHeight();
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustContainerHeight);

同时保留原Flex容器的CSS：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

这种方案需要JS参与，但能保留Flex布局的特性，适合必须使用Flex的场景。

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