Flex 布局里用 gap 处理子元素间距，比 margin 省心多了
给 Flex 容器里的子元素加间距，以前最常见的就是挨个加 margin，然后手动处理第一个和最后一个元素的边距。如果是多行换行，那还得分别算行间距和列间距，写到响应式那块更是翻来覆去地覆盖。
这种写法在简单场景里还能凑合，一旦布局复杂一点，维护起来就很闹心。
后来 gap 属性在 Flex 布局里也能用了，一下子省了很多事。
它直接作用在容器上，设置的是子元素之间的间隙，不用再一个个去处理首尾元素。而且行和列既可以一起设置，也可以分开控制。
gap 写一个值，就同时指定了行间距和列间距。比如 gap: 30px，容器里所有子元素之间的水平方向和垂直方向间隙都会变成 30px。
如果只想单独控制行或列，用 row-gap 和 column-gap 就行，row-gap 只影响行之间，column-gap 只影响列之间。这个拆分在需要不同方向的间距时很有用。
下面是一个完整的例子，直观感受一下效果。
容器开了 display: flex，gap 设成 30px，四个子元素被 flex: 1 均分宽度，还加了一点 hover 动效，悬停时会轻微上浮。
来此加密自2018年上线以来，凭借稳定的性能获得大量用户认可，8年稳定运行无重大故障，保障用户证书申请和管理的顺畅性。支持多种自动化验证方案，包括HTTP代理、DNS代理和DNS接口，用户可根据自身情况选择，灵活便捷。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局间隙示例</title>
<style>
.container {
display: flex;
gap: 30px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
margin: 20px auto;
max-width: 800px;
}
.item {
flex: 1;
min-height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.item:hover {
transform: translateY(-5px);
}
h1 {
text-align: center;
color: #333;
margin-top: 30px;
}
</style>
</head>
<body>
<h1>Flex布局间隙示例</h1>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>这个例子里容器宽度给了一个 max-width，子元素最小高度 100px，内容居中。实际项目里你把它丢进一个响应式栅格或者卡片列表里，配合 flex-wrap 换行也能跑得很好，不用额外操心行与行之间的间距被合并或者错位。
兼容性方面，gap 在 Flex 里已经被主流现代浏览器支持得很好了。Chrome 从 84 开始，Firefox 从 63 开始，Safari 从 14.1 开始，基本跑在近几年的环境里都没问题。
如果你还需要兼容特别老的浏览器，那还是老老实实用 margin 方案降级，或者用 @supports 做一下特性检测，渐进增强。不过面向现在的大多数项目，直接用 gap 已经能省掉不少冗余的样式代码。
浙公网安备 33010602011771号