如何消除Flex布局中块元素行之间的间隙？

开发者阿泽

2026-6-28

消除Flex块行之间的间隙问题

你的问题是：数量不固定的红色块元素，当块数量较少时行与行间距较大，数量较多时间距消失，需要消除块少时的行间隙。

问题原因

你的布局结构中：

.container是固定高度的Flex容器，默认align-items: stretch会让子元素.container-boxs被拉伸到容器的500px高度
.container-boxs本身也是Flex容器，默认align-content: stretch会把容器内的剩余垂直空间分配给行与行之间，导致块数量少时出现大间隙；当块数量占满容器高度时，没有剩余空间，间隙就消失了

解决方法

有两种简单的修复方式，选其一即可：

方法一：修改内层Flex容器的行对齐方式

给.container-boxs添加align-content: flex-start，让行顶部对齐，不分配剩余空间：

.container-boxs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 新增属性 */
}

方法二：阻止内层容器被拉伸

给外层.container添加align-items: flex-start，不让.container-boxs被拉伸到容器高度，内层容器高度由内容决定：

.container {
  width: 100%;
  display: flex;
  border: solid 3px black;
  flex-wrap: wrap;
  height: 500px;
  overflow-y: scroll;
  align-items: flex-start; /* 新增属性 */
}