在flex弹性布局的实际开发中，子元素之间的间距设置是高频需求，过去开发者通常会给每个子元素设置margin，再通过选择器去除首尾元素的多余边距，这种方式不仅代码冗余，还容易在响应式场景下出现样式错乱。css gap属性的出现很好地解决了这个问题，它可以直接在弹性容器上定义子元素之间的间距，不需要对子元素做额外的边距处理。
gap属性的基本语法
gap是row-gap和column-gap的简写属性，在弹性容器中可以同时设置行间距和列间距，语法格式如下：
/* 同时设置行间距和列间距为20px */ gap: 20px; /* 分别设置行间距20px，列间距30px */ gap: 20px 30px; /* 单独设置行间距 */ row-gap: 20px; /* 单独设置列间距 */ column-gap: 30px;
传统间距设置方式的问题
在gap属性普及之前，开发者常用以下两种方式设置弹性容器子元素间距：
- 给所有子元素设置margin，再通过
:first-child或者:last-child选择器去除首尾元素的边距，这种方式在动态增减子元素时需要同步调整选择器逻辑，维护成本高。 - 给弹性容器设置负margin，再给子元素设置正margin抵消，这种方式容易影响容器外部的其他布局，出现意外的边距溢出问题。
用gap优化弹性容器间距的示例
下面是一个简单的弹性容器布局，对比传统方式和gap方式的实现差异：
传统margin实现方式
.flex-box {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 100px;
height: 100px;
margin-right: 20px;
margin-bottom: 20px;
background: #f0f0f0;
}
/* 去除每行最后一个元素的右间距 */
.flex-item:nth-child(3n) {
margin-right: 0;
}
<div class="flex-box">
<div class="flex-item">子元素1</div>
<div class="flex-item">子元素2</div>
<div class="flex-item">子元素3</div>
<div class="flex-item">子元素4</div>
</div>
gap属性实现方式
.flex-box {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f0f0f0;
}
<div class="flex-box">
<div class="flex-item">子元素1</div>
<div class="flex-item">子元素2</div>
<div class="flex-item">子元素3</div>
<div class="flex-item">子元素4</div>
</div>
可以看到使用gap属性后，不需要再给子元素设置margin，也不需要额外的选择器处理边缘间距，代码量明显减少，逻辑也更清晰。
gap属性的兼容情况
目前主流现代浏览器都已经支持弹性容器使用gap属性，包括Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+，如果需要兼容更低版本的浏览器，可以添加前缀或者使用传统的margin方式做降级处理。
使用gap的注意事项
- gap设置的间距只作用于弹性容器的子元素之间，不会在容器边缘和子元素之间产生间距，不需要额外处理首尾元素的边距问题。
- 当弹性容器设置
justify-content: space-between等分布属性时，gap的间距会和分布规则共同作用，需要提前测试最终的布局效果。 - gap属性同样适用于grid网格布局，语法和flex布局中的使用方式完全一致，可以统一记忆。