Flexbox中break-row换行元素为何占用垂直空间？

你看到的灰色空白区域，根源在于flex布局的align-content属性和你插入的.break-row元素共同作用的结果：

1. 你的.row容器设置了固定高度500px，并且开启了flex-wrap: wrap，而flex容器默认的align-content值是stretch——这个属性会把容器的总高度平均分配给所有行，让每一行的高度拉伸以填满容器。
2. 当你插入.break-row元素后，它作为一个宽度100%的flex项，会强制创建新的空白行。这些空白行也会被align-content: stretch拉伸，占用一部分垂直空间，导致真正的.col元素所在的行被压缩，无法填满整个500px高度，最终露出.row的灰色背景（也就是你看到的空白）。
3. 哪怕你给.break-row设置了height: 0也没用，因为align-content: stretch作用的是整个行的高度，而不是单个flex项的高度，空白行仍然会被拉伸占用空间。

方法1：修复.break-row的样式（不推荐，灵活性差） #

如果你坚持要用.break-row元素，可以通过修改样式让空白行不被拉伸，但需要手动适配每行高度：

.row {
  align-content: flex-start; /* 让行顶部对齐，取消自动拉伸 */
}
.break-row {
  width: 100%;
  flex: 0 0 auto;
  height: 0;
  line-height: 0; /* 消除默认行高带来的隐性高度 */
  overflow: hidden;
}
/* 示例：当选择每2个元素换行时，设置col高度为容器的一半 */
/* 你需要根据不同的breakAfter值动态调整这个高度，不够灵活 */
.col {
  height: 250px;
}

方法2：不添加额外元素，用margin实现强制换行（推荐） #

我们可以用margin-right: 100%来强制flex项换行，不需要插入额外的.break-row元素，这样就不会产生空白行，.col元素所在的行可以被align-content: stretch正常拉伸填满高度。

修改JS代码：

$('a').on('click', function(e) {
  e.preventDefault();
  $('.col').removeClass('break-after'); // 清除之前的换行标记
  var breakAfter = $(this).data('breakafter');
  if (breakAfter > 0) {
    // 给指定位置的col添加换行类
    $('.col:nth-child(' + breakAfter + 'n)').addClass('break-after');
  }
});

添加CSS：

.col.break-after {
  margin-right: 100%; /* 强制后续元素换行 */
}

这样修改后，不管你选择哪种换行方式，.col元素所在的行都会自动拉伸填满对应的垂直空间，彻底消除灰色空白区域。

内容的提问来源于stack exchange，提问作者Roland Soós