推荐使用gap属性设置Flexbox子元素间距，现代浏览器支持且代码简洁；.container{display:flex;gap:10px}可设行列间距，多行布局同样适用；兼容老浏览器时可用margin配合负边距抵消，.container{margin-left:-10px;margin-top:-10px}.item{margin-left:10px;margin-top:10px}；也可用justify-content:space-between或align-items:center控制分布；避免gap与margin混用导致间距叠加。
在使用 CSS Flexbox 布局时，设置子元素之间的间距有几种实用方法。虽然 Flexbox 本身没有直接的 gap 替代属性（在早期版本中），但现在主流浏览器已支持 gap，让间距控制更简单直观。
1. 使用 gap 属性（推荐）
最简洁的方式是使用gap，它可以直接在容器上设置子元素之间的间距，包括行和列方向。适用场景：适用于现代浏览器，代码清晰易维护。
.container {
display: flex;
gap: 10px; /* 子元素之间水平和垂直间距 */
}如果是多行 Flex 布局（flex-wrap: wrap），gap 同样会作用于垂直方向的间距。
.container {
display: flex;
flex-wrap: wrap;
gap: 15px 10px; /* 行间距 15px，列间距 10px */
}2. 使用 margin 实现间距
如果需要兼容较老的浏览器，或对特定方向控制更精细，可以使用margin 给每个子元素添加外边距。常见做法：给所有子元素设置左侧和上侧 margin，然后通过容器重置左侧/上侧间距。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
margin-left: -10px; /* 抵消子元素的左间距 */
margin-top: -10px;
}
.item {
flex: 1;
margin-left: 10px;
margin-top: 10px;
}这种方法类似于传统的“负边距”布局技巧，能实现均匀的网格式间距。
3. 使用 justify-content 和 align-items 控制整体分布
当不需要固定间距，而是希望子元素自动分配空间时，可用主轴和交叉轴上的对齐方式。说明：这些属性不直接设置“间距”，但能影响子元素之间的空白分布。
.container {
display: flex;
justify-content: space-between; /* 两端对齐，中间间距相等 */
align-items: center;
}常用值：
-
space-between：首尾贴边，中间间距均分 -
space-around：每个项目周围有相等空间 -
space-evenly：所有间距完全相等
4. 避免常见问题
使用 margin 或 gap 时注意以下细节：避免同时使用 gap 和 margin 导致间距叠加。若使用 gap，建议子元素不再设置外边距。
在单行布局中，gap 只影响水平间距；多行时才影响垂直方向。
基本上就这些方法。现代开发推荐优先使用 gap，简洁又可靠。老项目可继续用 margin 负边距方案。关键是根据需求选择合适的方式。
