使用Flexbox实现不同尺寸div换行时消除垂直空白

嘿，我来帮你搞定这个Flexbox布局的垂直空白问题！首先咱们得弄明白为什么会出现这个情况：你的Flex容器.content设置了固定高度150px，但子元素里的.red高度只有40px，当Flex容器换行时，不同行的高度会跟着该行最高的子元素走（比如一行是40px，另一行是150px），而容器的固定高度会让矮行下方留出多余的空白。另外，Flexbox默认的垂直对齐规则也可能让视觉上的空白更明显。

下面给你几个实用的解决方案，你可以根据自己的需求选：

方案1：去掉容器的固定高度（最省心） #

如果不需要容器保持固定高度，直接移除.content的height: 150px，让容器高度自动适应各行内容的高度，这样就不会有多余空白了：

.content { 
  color: #fff; 
  font: 100 24px/100px sans-serif; 
  /* 移除固定高度 */
  text-align: center; 
  display: flex; 
  flex-wrap: wrap; 
}
.content div { width: 300px; }
.red { background: orangered; height: 40px; }
.green { background: yellowgreen; height: 150px; }
.blue { background: steelblue; height: 150px; }

方案2：保留固定高度，调整垂直对齐规则 #

如果必须保留容器的固定高度，你可以通过align-items和align-content来控制子元素和行的垂直位置，消除空白：

• align-items: flex-start：让每个子元素在自己的行内靠顶部对齐
• align-content: flex-start：让所有行整体靠容器顶部排列，不会分散在容器里产生空白

修改后的样式：

.content { 
  color: #fff; 
  font: 100 24px/100px sans-serif; 
  height: 150px; 
  text-align: center; 
  display: flex; 
  flex-wrap: wrap; 
  align-items: flex-start; /* 子元素靠顶部对齐 */
  align-content: flex-start; /* 所有行靠容器顶部排列 */
}
.content div { width: 300px; }
.red { background: orangered; height: 40px; }
.green { background: yellowgreen; height: 150px; }
.blue { background: steelblue; height: 150px; }

方案3：自定义div之间的间距 #

如果想给子元素之间添加可控的间距（不管水平还是垂直），用Flexbox的gap属性最方便，它不会像margin那样出现外边距折叠的问题：

.content { 
  color: #fff; 
  font: 100 24px/100px sans-serif; 
  /* 可以保留固定高度，也可以去掉 */
  height: 150px; 
  text-align: center; 
  display: flex; 
  flex-wrap: wrap; 
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px; /* 水平和垂直间距都是10px，也可以分开设置row-gap/column-gap */
}
.content div { width: 300px; }
.red { background: orangered; height: 40px; }
.green { background: yellowgreen; height: 150px; }
.blue { background: steelblue; height: 150px; }

你可以根据自己的实际布局需求选择合适的方案，试试调整这些属性，应该就能解决你的垂直空白问题啦！

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