如何减少flex-wrap换行时的间隙？该现象成因是什么？

导致间隙的核心原因 #

1. 交叉轴对齐方式冲突：你给flex容器设置了align-items: center，同时卡片高度仅为容器高度的40%。当卡片换行后，每一行的高度由卡片高度决定，align-items: center会让每一行在容器垂直方向居中，从而在行与行之间、容器上下产生空白间隙。
2. 尺寸规则冲突：卡片同时设置了width: 30%和flex: 1 1 21rem，这两个属性会共同影响卡片在主轴方向的尺寸计算，可能导致主轴方向出现预期外的间隙。

消除间隙的具体方法 #

方法1：修正交叉轴对齐方式 #

把容器的align-items从center改为flex-start（让卡片顶部对齐）或stretch（让卡片填充行高）：

#gallery .card-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start; /* 替换原center值 */
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

如果选择stretch，可以去掉卡片的height: 40%，让卡片自适应行高，彻底消除垂直间隙。

方法2：统一卡片尺寸规则 #

不要同时混用width和flex-basis，二选一即可：

• 按比例分配宽度：保留flex属性并调整flex-basis为百分比，删除width：

.card-container .card {
  border: solid black 1px;
  height: 40%;
  flex: 1 1 30%; /* 用flex-basis替代width */
}

• 按固定最小宽度换行：保留flex: 1 1 21rem，删除width: 30%：

.card-container .card {
  border: solid black 1px;
  height: 40%;
  flex: 1 1 21rem;
}

方法3：调整容器高度（可选） #

如果不需要容器占满父元素100%高度，直接删除容器的height: 100%，让容器高度由内容撑开，垂直方向的间隙会自动消失。

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