gap属性是CSS中用于设置弹性盒子或网格布局子元素间距的简写属性，统一控制主轴方向上的间距；2. 使用gap可避免传统margin方法需单独清除最后一个或第一个元素边距的问题，使布局更整洁；3. 推荐在现代浏览器中使用gap实现均匀间距，兼容性良好，对老旧浏览器可通过:not(:last-child)或@supports进行降级处理。
在使用CSS弹性盒子（Flexbox）时，如果子元素之间的间距不均匀，可以通过gap属性来统一设置间距。这个属性能有效避免手动调整margin带来的不一致问题，让布局更整洁、更易维护。
什么是gap属性？
gap 是CSS中用于设置网格或弹性盒子中子元素之间间距的简写属性。它同时设置行与列之间的间距，在弹性盒子中主要用于控制主轴方向上子项的间距。
在flex布局中，gap只作用于主轴方向（即flex-direction的方向），不会影响交叉轴。
如何用gap解决间距不均问题？
传统做法中，开发者常通过给子元素设置margin-right或margin-left来实现间距，但最后一个或第一个元素往往需要额外清除margin，否则会导致布局溢出或不对称。
立即学习“前端免费学习笔记（深入）”；
使用gap可以自动处理这些问题，无需额外清除边距。
-
使用margin（容易出错）：
.container { display: flex; }
.child { margin-right: 16px; }
.child:last-child { margin-right: 0; } -
使用gap（推荐）：
.container {
display: flex;
gap: 16px;
}
简洁明了，无需处理边界情况。
兼容性与注意事项
gap属性在现代浏览器中支持良好，包括Chrome、Firefox、Safari和Edge的较新版本。但在一些旧版本浏览器（如IE）中不被支持。
若需兼容老版本浏览器，可考虑以下方案：
- 使用
margin配合:not(:last-child)选择器：.child:not(:last-child) { margin-right: 16px; } - 使用
gap并为不支持的环境添加降级处理（可通过CSS @supports判断）
基本上就这些。只要项目允许使用现代CSS，优先用gap来管理弹性盒子的间距，能大幅简化布局代码，避免不均匀问题。
