Flexbox gap：间距控制与兼容策略

---

title: Flexbox gap：间距控制与兼容策略

keywords:

• flexbox
• gap
• row-gap/column-gap
• 兼容
• 间距

description: 说明 Flexbox 的 gap/row-gap/column-gap 间距控制，在现代浏览器中替代外边距方案，并给出旧版兼容与响应策略。

categories:

• 文章资讯
• 编程技术

---

概述

Flexbox 现已支持 gap 间距控制，可更简洁地设置主轴与交叉轴间距。旧版浏览器可回退到外边距与负边距修正方案。

示例

.toolbar { display: flex; gap: 12px }
.grid { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 12px }

工程建议

• 兼容探测：特性检测后启用；旧环境回退到 margin。
• 响应式：不同断点动态调整 gap；避免过度稀疏或拥挤。
• 可访问性：保持控件间可点击区域与视觉一致性。

参考与验证

• MDN Flexbox gap 文档：https://developer.mozilla.org/docs/Web/CSS/row-gap