Flex Box不同高度组件的空白空间填补问题咨询

Flex布局本身是按行/列依次排列的，同一行的元素会统一高度对齐，但没办法让下一行元素自动填补上一行的空白。要实现这种“填充空白”的效果，推荐用下面两种方案：

方案1：CSS Grid（首选） #

Grid天生支持这种不规则元素的空白填充，只需几行CSS就能搞定：

/* 容器样式 */
.grid-container {
  display: grid;
  /* 定义列数，比如3列，每列自适应宽度 */
  grid-template-columns: repeat(3, 1fr);
  /* 开启自动填充空白 */
  grid-auto-flow: dense;
  /* 可选：设置元素之间的间距 */
  gap: 1rem;
}

把原来的Flex容器改成Grid容器后，高度小的元素旁边的空白会被后续元素自动填补，完全符合需求。

方案2：Flex布局+JS（仅适合必须用Flex的场景） #

如果一定要保留Flex布局，只能通过JS手动分配元素到不同列，模拟瀑布流效果：

1. 先把原来的Flex容器改成多个垂直排列的Flex列容器
2. 把每个子元素放到当前高度最小的列里
   示例代码：

// 获取容器和所有子元素
const container = document.querySelector('.flex-container');
const items = Array.from(container.children);
// 定义列数，比如3列
const columnCount = 3;
const columns = [];

// 创建列容器
for (let i = 0; i < columnCount; i++) {
  const col = document.createElement('div');
  col.style.display = 'flex';
  col.style.flexDirection = 'column';
  col.style.gap = '1rem';
  container.appendChild(col);
  columns.push(col);
}

// 分配元素到高度最小的列
items.forEach(item => {
  const shortestCol = columns.reduce((prevCol, currCol) => {
    return prevCol.offsetHeight < currCol.offsetHeight ? prevCol : currCol;
  });
  shortestCol.appendChild(item);
});

这种方式需要JS配合，复杂度比Grid高，优先推荐用Grid方案。

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