在Flexbox中使用gap属性可直接设置子元素间距，无需手动调整margin。首先将容器设为display: flex，并添加gap值，如gap: 10px，可同时作用于主轴与交叉轴；若使用两个值如gap: 10px 20px，则分别对应垂直和水平间距，等同于row-gap和column-gap的组合。需注意gap仅在flex容器中生效，且row-gap在多行布局（flex-wrap: wrap）时起作用，而gap不产生外边距偏移问题。现代浏览器广泛支持该特性（IE不支持）。实际应用中，如卡片布局可通过flex-wrap: wrap配合gap实现响应式网格，代码更简洁直观。
在弹性盒子（Flexbox）中，使用 gap 属性可以轻松设置子元素之间的间距，无需再通过 margin 手动控制。这个属性原本来自 Grid 布局，但在现代浏览器中也已广泛支持在 Flex 容器上使用。
1. 启用 gap 的基本语法
要在弹性盒子中使用 gap，首先需要将容器的 display 设置为 flex 或 inline-flex，然后直接添加 gap 属性：
.container {
display: flex;
gap: 10px; /* 子元素之间水平和垂直间距均为 10px */
}
如果只设置一个值，gap 会同时作用于主轴（horizontal）和交叉轴（vertical）方向。对于单行或单列布局，主要体现为主轴方向的间隔。
2. 分别设置水平和垂直间距
可以使用两个值来分别定义主轴和交叉轴的间距：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
gap: 10px 20px; /* 竖直间距 10px，水平间距 20px */
}
等价于：
.container {
display: flex;
row-gap: 10px;
column-gap: 20px;
}
-
row-gap：控制行与行之间的垂直间距（在多行 flex-wrap 换行时生效） -
column-gap：控制同一行中项目之间的水平间距
3. 注意事项和兼容性
虽然 gap 在 Flex 中使用非常方便，但需注意以下几点：
- 必须在父容器上设置
display: flex并开启flex-wrap: wrap（如需多行）才能让row-gap生效 - gap 不会影响容器边缘，只作用于项目之间，避免了传统 margin 带来的外边距偏移问题
- 主流现代浏览器均已支持 flex 容器中的 gap（IE 不支持，Edge 79+ 支持）
4. 实际例子：卡片布局
创建一个自动换行的卡片网格，使用 gap 控制间距：
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
<p>.card {
flex: 1 1 200px; /<em> 最小宽度约 200px，可伸缩 </em>/
background: #f0f0f0;
padding: 16px;
}</p>这样每张卡片之间都有统一的 16px 间距，布局整齐且响应式良好。
基本上就这些。用 gap 替代 margin 处理间隔，代码更简洁，行为更直观。不复杂但容易忽略。
