gap属性可用于flexbox容器中直接设置子元素间距，避免margin带来的样式混乱。只需在display: flex容器上设置gap值，即可实现子项间等距排列，无需处理首尾边距。支持px、rem等单位及calc()函数，配合媒体查询更易维护。主流浏览器均支持，但不兼容ie，建议新项目优先使用。
在CSS中使用Flexbox布局时，传统的元素间距控制通常依赖于 margin 或通过额外的空白元素实现，这种方式不够灵活且容易造成样式混乱。但随着现代浏览器对 gap 属性的支持增强，我们可以在Flexbox容器中直接设置子元素之间的间距，让布局更简洁、直观。
什么是 gap 属性？
gap 是CSS Grid和Flexbox都支持的一个属性，用于设置网格或弹性子元素之间的间距。在Flexbox中使用 gap 可以避免手动为每个子项添加 margin，尤其适合等间距排列的场景，比如按钮组、卡片列表、导航菜单等。
注意：gap 应用在容器（父元素）上，作用于子元素之间，不会在容器边缘产生多余空白。
如何在 Flexbox 中使用 gap？
只需在设置了 display: flex 的容器上添加 gap 属性即可：
立即学习“前端免费学习笔记（深入）”；
基本语法：
- gap:
; - 在Flex布局中，通常只设置一个值，系统会自动应用到主轴和交叉轴方向。
示例代码：
.container {
display: flex;
gap: 16px; /* 子元素之间水平和垂直间距均为16px */
}
<p>.container-vertical {
display: flex;
flex-direction: column;
gap: 12px; /<em> 纵向排列时，设置垂直间距 </em>/
}</p>gap 与 margin 相比的优势
- 无需为第一个或最后一个元素清除边距，避免“外扩”问题。
- 代码更简洁，维护更容易。
- 响应式调整方便，配合媒体查询统一修改间距。
- 支持所有长度单位（px、rem、em、% 等）以及 calc() 函数。
对比示例：
使用 margin 的方式：
.item {
margin-right: 16px;
}
.item:last-child {
margin-right: 0;
}
使用 gap 则完全不需要处理边界情况：
.container {
display: flex;
gap: 16px;
}
浏览器兼容性与注意事项
目前主流浏览器（Chrome, Firefox, Safari, Edge）均支持 Flexbox 中的 gap 属性。但如果你需要支持较老版本（如 IE 完全不支持），建议保留降级方案或使用 PostCSS 工具自动补全。
不支持IE，移动端和现代浏览器基本无问题。
基本上就这些。使用 gap 让 Flexbox 布局更干净高效，推荐在新项目中优先采用。不复杂但容易忽略。
