使用 gap 属性可在 Flexbox 卡片布局中统一设置间距。通过 display: flex、flex-wrap: wrap 和 gap: 16px，可实现自动换行且间距均匀的卡片排列，无需额外处理 margin。gap 简化了传统边距控制带来的首尾贴边或错位问题，现代浏览器均支持该属性；若需兼容老版本浏览器，可采用 margin 负边距或改用 Grid 布局。推荐在现代项目中使用 gap，提升代码简洁性与维护性。
在CSS中使用Flexbox布局制作卡片时，想要实现卡片之间的间距统一，可以结合 gap 属性来轻松实现。虽然传统Flexbox本身不直接支持子元素之间的“间隙”控制（即项目间距），但现代浏览器已经支持在 flex 容器上使用 gap 属性，让布局更简洁、直观。
什么是 gap 属性？
gap 是 CSS 中用于设置网格或弹性容器中行与列之间间距的属性。它可以在 Flexbox、Grid 等布局中使用，语法如下：
gap: <row-gap> <column-gap>;如果只设置一个值，则行列间距相同。在 Flexbox 中，它会作用于主轴和交叉轴上的项目之间。
如何在 Flexbox 卡片布局中使用 gap？
假设你有一组卡片，希望它们在一行或多行排列，并保持统一的间距。你可以这样写：
立即学习“前端免费学习笔记（深入）”；
.card-container { display: flex; flex-wrap: wrap; gap: 16px; / 所有卡片之间间距为 16px / }
.card { flex: 1 1 200px; / 每个卡片最小宽度 200px，可伸缩 / background: #f4f4f4; padding: 16px; border-radius: 8px; }
HTML 结构示例：
<div class="card-container"> <div class="card">卡片 1</div> <div class="card">卡片 2</div> <div class="card">卡片 3</div> <div class="card">卡片 4</div> </div>
效果说明：
- 使用 flex-wrap: wrap 允许卡片换行。
- gap: 16px 自动为所有相邻卡片之间添加水平和垂直间距，无需额外处理边距。
- 不再需要通过 margin 控制间距，避免首尾卡片贴边或最后一行错位的问题。
兼容性与注意事项
目前主流浏览器（Chrome, Firefox, Safari, Edge）都已支持在 Flexbox 中使用 gap 属性。但如果你需要支持较老版本浏览器（如 IE），则需考虑降级方案：
- 使用 margin 配合负边距（如父容器设置
margin: -8px，卡片设置margin: 8px）模拟 gap 效果。 - 或者改用 CSS Grid 布局，对多列卡片更友好。
总结：推荐使用 gap 的原因
使用 gap 制作 Flexbox 卡片布局，代码更干净，间距更可控，不会影响盒模型，也不需要额外清除首尾边距。只要项目支持现代浏览器，gap 就是最佳选择。
基本上就这些。简单设置一个属性，就能告别复杂的 margin 计算。
