不等高div的CSS列对齐问题：flex布局出现多余空白如何解决

问题根因 #

你遇到的空白是flex换行布局的固有特性导致的：设置flex-wrap: wrap后子元素会按行排列，每一行的高度由当前行内最高的子元素决定，高度较小的子元素只会在当前行内对齐，不会自动填充上一行剩下的垂直空间。当第三行左侧子元素高度远大于右侧时，第四行的元素只能从第三行底部开始排列，就出现了你看到的大面积顶部空白。

最优解决方案：使用CSS多列布局 #

不用修改HTML结构，直接调整SCSS样式即可，完美匹配你「单个子元素居中、多个子元素两列瀑布流排列」的需求：

body {
  background: grey;  
}
.container {
  max-width: 500px;
  ul {
    list-style-type: none;
    background: white;
    padding: 30px;
    /* 多列布局核心配置 */
    column-count: 2;
    column-gap: 20px;
    /* 单个子元素时自动切换为单列居中 */
    &:has(> li:only-child) {
      column-count: 1;
    }

    >li {
      border: 2px solid black;
      padding: 5px;
      margin-bottom: 20px;
      /* 防止单个li被拆分到两列显示 */
      break-inside: avoid;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

样式逻辑说明 #

1. column-count: 2直接实现两列布局，元素会自动填充垂直方向的空白，不会出现flex布局的空隙问题
2. :has()选择器判断如果只有1个li子元素，就切换为单列，自然实现居中效果
3. break-inside: avoid保证每个li块完整显示，不会被切割到上下两列
4. 所有间距和原有效果保持一致，不需要额外JS逻辑，兼容性覆盖绝大多数现代浏览器。

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