Flex布局之gap/row-gap/column-gap

gap 属性用于设置容器中子元素之间的间距，简化了传统使用 margin 的复杂计算。

gap 属性

gap 是 row-gap 和 column-gap 的简写形式。

语法

CSS

gap: <row-gap> <column-gap>;

CSS

.container {
  display: flex;
  gap: 20px;              /* 行列间距均为20px */
  gap: 20px 30px;         /* 行间距20px，列间距30px */
}

row-gap 和 column-gap

单独设置行间距或列间距。

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;     /* 行间距 */
  column-gap: 25px;  /* 列间距 */
}

Flex 布局中的应用

单行 Flex

CSS

.container {
  display: flex;
  gap: 20px;  /* 子元素水平间距20px */
}

.item {
  /* 无需设置 margin */
}

多行 Flex（flex-wrap）

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;  /* 行间距20px，列间距30px */
}

与传统 margin 方案对比

方案	优点	缺点
`gap`	代码简洁、不会产生额外边距	兼容性需要考虑（现代浏览器支持良好）
`margin`	兼容性好	需要处理首尾元素的边距问题

CSS

/* 传统方案 */
.item {
  margin-right: 20px;
  margin-bottom: 20px;
}
.item:last-child {
  margin-right: 0;  /* 需要额外处理 */
}

/* gap 方案 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  /* 简洁统一 */
}

实际案例

卡片网格

CSS

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 calc(33.33% - 16px);
  min-width: 280px;
}

导航栏

CSS

.nav {
  display: flex;
  gap: 32px;
}

要点总结

gap 简写：gap: 行间距列间距
row-gap 设置行间距，column-gap 设置列间距
Flex 容器使用 gap 无需处理首尾元素的边距问题
现代浏览器支持良好，推荐使用

📝 发现内容有误？点击此处直接编辑