使用 row-gap 和 column-gap 可解决 Flex 布局换行后间距不均问题，通过 .container { display: flex; flex-wrap: wrap; gap: 16px 20px; } 统一控制行列间距，避免 margin 带来的布局混乱，更简洁可控。
在使用 CSS Flex 布局时，如果子元素设置了换行（flex-wrap: wrap），可能会发现换行后的上下间距不一致，尤其是在每行子元素数量不相等的情况下。这是因为 flex 默认不会为行与行之间提供统一的垂直间距控制。
解决这个问题最有效的方式是使用 row-gap 和 column-gap 属性。它们可以在不依赖 margin 的情况下，为 flex 容器内的项目添加统一的行间距和列间距，避免因 margin 叠加或换行错位导致的布局问题。
使用 row-gap 控制行间距
row-gap 用于设置行与行之间的间距。在 flex 布局中启用换行后，通过设置 row-gap，可以确保每一行之间的垂直间距保持一致。
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
row-gap: 16px; /* 统一设置行间距 */
}
使用 column-gap 控制列间距
column-gap 用于设置同一行中项目之间的水平间距。相比使用 margin-right 或 margin-left，它不会在首尾元素上产生多余空白，布局更干净。
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
row-gap: 16px;
column-gap: 20px; /* 统一设置列间距 */
}
gap 的简写形式（可选）
如果你希望同时设置行和列的间距，可以直接使用 gap 简写属性：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px 20px; /* row-gap column-gap */
}
注意：即使在 flex 布局中，gap 也能正常工作，无需切换到 Grid。
为什么比用 margin 更好？
- 避免 margin 折叠或叠加造成的间距不均
- 不会影响首尾元素的外边距，布局更可控
- 代码更简洁，语义更清晰
- 支持响应式设计，配合媒体查询轻松调整
基本上就这些。使用 row-gap 和 column-gap 是现代布局中处理 flex 换行间距的最佳实践，兼容性良好（现代浏览器均支持），推荐优先使用。
