如何填充Flex布局（Row方向）中Div的空白间隙？

你说得没错，纯Flexbox（row方向）确实很难实现让第6个Div自动填补第5个Div下方的空白间隙——这是因为Flexbox本质是一维布局，它只会按行（或列）的顺序依次排列元素，当当前行剩余空间不足以放下下一个元素时，才会换行到下一行，不会回溯去填补前面行的空白。

不过我们有更合适的纯CSS方案来实现你要的效果，那就是使用CSS Grid，它天生就是为二维布局设计的，完美适配这种需要填补间隙的场景。

具体实现步骤 #

1. 把原来的display: flex容器改成display: grid
2. 设置网格列的宽度：用repeat(auto-fill, [每个Div的宽度])让网格自动根据容器宽度生成合适的列数
3. 保留间隙设置（gap），和原来的Flex布局一致

举个代码示例：

/* 原来的Flex容器样式 */
/* .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
} */

/* 修改后的Grid容器样式 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px); /* 这里替换成你实际的Div宽度 */
  gap: 10px;
}

/* 你的Div样式保持不变 */
.item {
  height: 100px; /* 你设置的固定高度 */
  background: #ddd;
}

这样修改后，所有Div会自动填充网格中的空白位置，第6个Div自然会跑到第5个Div下方的空隙里，完全不需要额外的JS逻辑。

为什么不推荐用Flex强行实现？ #

如果一定要坚持用Flex，你需要通过JavaScript来计算每个元素的位置，手动调整元素的order属性或者绝对定位，但这样不仅代码复杂，还会破坏Flex布局的响应性，维护成本很高。相比之下，CSS Grid是更简洁、更符合需求的原生解决方案。

内容的提问来源于stack exchange，提问作者Ben Van Looy