gap属性是flexbox中用于设置子元素间距的现代css方案，语法简洁且避免边距计算复杂性。1. 使用gap: 16px可在子项间创建统一间距，不作用于容器边缘。2. 支持单值（同距）和双值（行、列距），单位包括px、rem等；换行时双值有效。3. 适用于按钮组、标签列表等组件，提升代码可维护性。4. 主流浏览器均支持，但IE不兼容，需用margin或space-between等回退方案。合理使用gap可显著优化布局开发体验。
在使用 CSS Flexbox 布局时，子元素之间的间距控制一直是一个常见需求。传统方法通常依赖 margin 来实现间隔，但这种方式容易带来计算复杂、响应式适配困难等问题。现代浏览器支持的 gap 属性为 Flexbox 提供了更简洁、直观的间距控制方式。
什么是 gap 属性？
gap 属性用于设置容器内子元素之间的间距，可以同时指定行与列方向的间隔，语法简洁且无需额外处理边距。它原本在 Grid 布局中引入，现在也已被 Flexbox 完全支持。
在 Flex 容器上使用 gap 后，浏览器会自动在子项之间插入指定的空白，不会出现在容器边缘，避免了首尾元素贴边的问题。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; gap: 16px; /* 子元素之间统一 16px 间距 */ }
gap 的取值方式
gap 支持多种单位和写法，灵活适应不同设计需求：
- 单个值：如
gap: 12px，表示主轴和交叉轴方向都使用相同间距 - 两个值：如
gap: 12px 20px，分别代表行间距和列间距（适用于 flex-wrap 换行的情况） - 支持单位包括：
px、rem、%、em等
注意：当 Flex 容器未换行（flex-wrap: nowrap）时，第二个值（列间距）无效；只有换行后才会体现行间距效果。
实际应用场景
在构建按钮组、标签列表、卡片网格等组件时，gap 能显著简化样式编写。
常见例子：水平排列的按钮组 “`css .button-group { display: flex; gap: 8px; }
.button { padding: 8px 16px; background: #007bff; color: white; border: none; cursor: pointer; }
<p>此时每个按钮之间都有 8px 的空隙，无需给按钮单独设置 <code>margin-right</code>，也不用担心最后一个元素多出多余边距。</p> <H3>兼容性与注意事项</H3> <p>目前主流浏览器（Chrome、Firefox、safari、edge）均支持 Flexbox 中的 <strong>gap</strong> 属性，但在一些旧版本（如 IE 全系）中不被支持，需注意项目兼容要求。</p> <p>若需兼容不支持 <strong>gap</strong> 的环境，可结合 <code>margin</code> 回退方案，或使用 <code>justify-content: space-between</code> 等替代布局策略。</p> <p>基本上就这些。合理使用 <strong>gap</strong> 让 Flexbox 布局更干净、易维护，是现代 CSS 开发推荐的做法。</p>