使用 gap 替代 margin 可解决 Flexbox 子元素垂直间距不统一问题。首先设置 align-items: flex-start 防止拉伸，再通过 gap: 16px 等值统一控制间距，避免 margin 折叠与对齐冲突，实现稳定布局。
在使用 Flexbox 布局时，子元素的垂直间距不统一是一个常见问题，尤其当 align-items 和 margin 同时作用于子元素时，容易导致布局错乱或间距不一致。要解决这个问题，关键在于明确两者的职责，并合理搭配使用。
理解 align-items 的作用范围
align-items 控制的是子元素在交叉轴（通常是垂直方向）上的对齐方式，适用于所有子元素的整体对齐。常见取值包括：
- flex-start：顶部对齐
- center：居中对齐
- flex-end：底部对齐
- stretch：拉伸填满容器（默认值）
如果子元素高度不同或设置了 margin，而 align-items: stretch 被启用，浏览器会尝试拉伸子元素以填满容器，可能导致 margin 表现异常或视觉间距不均。
margin 影响实际间距表现
当子元素设置了 margin-top 或 margin-bottom，这些外边距会参与实际的空间计算。但在 Flex 容器中，若未关闭拉伸行为，margin 可能被“压缩”或与其他子元素的间距不一致。
立即学习“前端免费学习笔记（深入）”；
解决方法是：
- 设置 align-items: flex-start 防止子元素被拉伸
- 为子元素显式设置 margin-bottom 统一垂直间距
- 避免同时在首尾元素上添加多余 margin，可用 gap 替代
推荐方案：用 gap 替代 margin 实现统一间距
Flexbox 提供了更现代的解决方案 —— gap 属性，专门用于控制子元素之间的间距，不会受对齐方式影响。
flex-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px; /* 统一垂直间距 */
}这样可以彻底避免 margin 折叠、align-items 拉伸带来的干扰，实现真正一致的垂直间距。
基本上就这些。合理使用 align-items 控制对齐，配合 gap 管理间距，比依赖 margin 更稳定可靠。如果必须用 margin，记得关闭 stretch 并统一设置方向。
