如何让Flex项先换行至容器高度上限再随窗口缩小收缩？

默认Flexbox在flex-wrap: wrap模式下，只会优先根据宽度换行，完全忽略容器的高度限制，导致项目持续换行后溢出容器。要实现「先换行至容器高度填满，再收缩项目」的需求，纯CSS难以动态适配所有场景，结合少量JavaScript可以完美解决。

调整后的CSS代码 #

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px dashed red;

  display: flex;
  align-items: flex-start;
  height: 120px;
  flex-wrap: wrap;
  align-content: flex-start; /* 关键：避免行被拉伸，保证高度计算准确 */
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 20px;
  text-align: center;

  width: 400px;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box; /* 确保padding/border计入宽高，避免计算误差 */
}

.flex2 {
  width: 300px;
}

JavaScript逻辑（动态适配） #

通过监听窗口尺寸变化，计算当前项目的换行行数，当行数超过容器能容纳的最大值时，强制关闭换行，让项目开始收缩：

const container = document.querySelector('.container');
const maxContainerHeight = container.offsetHeight;

function adjustFlexWrap() {
  const items = container.querySelectorAll('.flex');
  if (!items.length) return;

  // 获取单个项目的实际高度
  const singleItemHeight = items[0].offsetHeight;
  // 计算当前所有项目的最大底部位置，判断实际行数
  const maxItemBottom = Math.max(...Array.from(items).map(item => item.getBoundingClientRect().bottom));
  const containerTop = container.getBoundingClientRect().top;
  const currentRowCount = Math.ceil((maxItemBottom - containerTop) / singleItemHeight);
  
  // 计算容器能容纳的最大行数
  const maxAllowedRows = Math.floor(maxContainerHeight / singleItemHeight);

  // 根据行数切换换行模式
  container.style.flexWrap = currentRowCount > maxAllowedRows ? 'nowrap' : 'wrap';
}

// 初始化检查
adjustFlexWrap();
// 监听窗口 resize 事件
window.addEventListener('resize', adjustFlexWrap);

替代方案：纯CSS媒体查询（适合固定内容场景） #

如果你的项目数量和尺寸固定，可以手动计算阈值，用媒体查询硬编码切换换行模式：

/* 假设当窗口宽度小于1000px时，会触发第三行换行，此时强制关闭换行 */
@media (max-width: 1000px) {
  .container {
    flex-wrap: nowrap;
  }
}

这种方式不需要JS，但灵活性差，内容变动时需要重新计算阈值。

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