为什么CSS3的flex wrap换行后会出现多余垂直间距？
这是因为flex容器默认将子元素视为单行文本基线对齐，导致不同高度的项目底部产生不对齐的空白。要消除这种间距，需要显式设置容器的`align-items`属性为`stretch`或`start`，或者调整项目的`align-self`。通过统一对齐方式，可以确保换行后的视觉整洁。
如何通过代码验证并解决该问题？
直接修改CSS中的`align-items`属性即可解决。将默认的`stretch`改为`flex-start`，所有项目将对齐到顶部，从而消除因高度差异产生的底部空隙。以下是一个完整的HTML和CSS示例，展示了未修复和修复后的效果对比。
<meta charset="UTF-8"><title>Flex Wrap Spacing Fix;/title>
<style>
.container {
display: flex;
flex-wrap: wrap;
/* 默认 align-items: stretch */
/* 修复方案：改为 flex-start */
align-items: flex-start;
gap: 10px;
}
.item {
width: 100px;
background-color: #ddd;
border: 1px solid #999;
}
.tall { height: 150px; }
.short { height: 80px; }
</style>
</title><div class="container">
<div class="item tall">Tall</div>
<div class="item short">Short</div>
<div class="item tall">Tall</div>
<div class="item short">Short</div>
</div>
当使用gap属性时，垂直间距如何计算？
在设置了`gap`属性的情况下，换行后的垂直间距由`gap`值决定，而不是由内容高度差决定。`gap`会在每个项目之间插入固定的空间，包括换行处的垂直间隙。如果希望严格控制换行后的间距，应同时设置`gap`和`align-items`。例如，`gap: 1rem`会在每行之间插入1rem的垂直空间，无论项目高度如何。
,
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
