gap

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您旅程的每个阶段提供云产品。开始使用 200 美元的免费信用额度!

CSS 中的 gap 属性是 row-gapcolumn-gap 的简写,用于指定槽的尺寸,即 网格弹性盒多列 布局中行和列之间的空间。

/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr 1fr;
  gap: 30px 20px;
}

/* Flex layout */
.container {
  display: flex;
  gap: 10%;
}

/* Multi-column layout */
.container {
  column-count: 5;
  gap: 20px;
}
Diagram showing six boxes in two rows of three with gaps between them to illustrate the effect of the gap property.

使用下面演示中的滑块查看 gap 属性的实际效果

语法

gap 接受一个或两个值

  • 单个值将 row-gapcolumn-gap 都设置为相同的值。
  • 使用两个值时,第一个值设置 row-gap,第二个值设置 column-gap
.container {
  gap: 1rem;
  /* Is equivalent to:
  *  row-gap: 1rem;
  *  column-gap: 1rem
  */
  
  gap: 10px 15%;
  /* Is equivalent to:
  *  row-gap: 10px;
  *  column-gap: 15%;
  */
}

CSS 网格布局模块的规范使用 grid-gap 属性定义网格轨道之间的间距。gap 旨在替换它,以便可以在多种 CSS 布局方法(如弹性盒)中定义间隙,但 grid-gap 仍需要在浏览器可能已实现 grid-gap 但尚未开始支持较新的 gap 属性的实例中使用。

gap 接受以下值

  • normal(默认)浏览器将为多列布局指定 1em 的使用值,为所有其他布局上下文(即网格和弹性盒)指定 0px。
  • <length>任何有效且非负的 CSS 长度,例如 pxemrem% 等。
  • <percentage>间隙的大小,相对于元素尺寸的非负百分比值。(有关详细信息,请参见下文。)
  • initial应用属性的默认设置,即 normal
  • inherit采用父级的 gap 值。
  • unset从元素中删除当前的 gap

gap 属性中的百分比

当间隙维度中容器的大小确定时,gap 会根据任何布局类型中容器内容框的大小来解析百分比。

换句话说,当浏览器知道容器的大小后,它就可以计算出 gap 的百分比值。例如,当容器的高度为 100px 且 gap 设置为 10% 时,浏览器知道 100px 的 10% 是 10px。

但是,当浏览器不知道大小的时候,它会想,“10% 的什么?”在这些情况下,gap 的行为会根据布局类型而有所不同。

在网格布局中,百分比解析为零以确定内在尺寸贡献,但在布局框内容时解析为元素的内容框,这意味着它将在项目之间放置空格,但空格不会影响容器的大小。

在此演示中,容器的高度是不确定的。查看增加 gap 大小时会发生什么情况。然后以像素单位设置 gap 并再次尝试

在弹性盒布局中,百分比在所有情况下都解析为零,这意味着当浏览器不知道容器大小时,间隙将不适用

将 calc() 函数与 gap 一起使用

您可以使用 calc() 函数 指定 gap 的大小,但在撰写本文时,Safari 和 iOS 上不支持它

.flex-layout {
  display: flex;
  gap: calc(5vh + 5px) calc(5vw + 5px);
}


.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(5vmin + 5px);
}

示例

gap 属性旨在用于网格、弹性盒和多列布局。让我们看看一些示例。

网格布局

在以下演示中,您可以看到 gap 用于在网格容器上指定 row-gapcolumn-gap 属性,分别定义网格行和网格列之间的槽。

弹性盒布局

将 gap 应用于弹性盒容器的主轴表示在弹性盒布局的单行中**弹性盒项目之间**的间距。

这是在行方向上使用的 column-gap

这是在列方向上使用的 row-gap

gap 应用于弹性盒容器的交叉轴表示在弹性盒布局的**弹性盒行之间**的间距。

这是在行方向上使用的 row-gap

这是在列方向上使用的 column-gap

多列布局

column-gap 出现在 多列 布局中,用于在列框之间创建间隙,但请注意,row-gap 没有效果,因为我们只在列中工作。gap 仍然可以在此上下文中使用,但只会应用 column-gap

正如您在下一个演示中看到的,尽管 gap 属性的值为 2rem,但它只在水平方向上分隔项目,而不是两个方向,因为我们只在列中工作

您可能还想知道…

关于使用 gap 属性,有几点需要注意。

它是一种防止不需要的间距的好方法

您是否曾经使用过边距在元素之间创建间距?如果我们不小心,最终可能会在项目组之前和之后出现额外的间距。

解决此问题通常需要添加负边距或使用伪选择器删除特定项目的边距。但是,在更现代的布局方法中使用 gap 的好处在于,您只会在项目之间有间距。开头和结尾的额外杂物永远不会成为问题!

但是,嘿,如果您希望在使用 gap 的同时在项目周围留出空间,请像这样在容器周围放置 padding

.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

间隙大小并不总是等于 gap 值

gap 属性并不是唯一可以为项目之间添加间隙的属性。边距、填充、justify-contentalign-content 也会增加间隙的大小并影响实际的 gap 值。

在下面的示例中,我们设置了 1em 的 gap,但正如你所看到的,项目之间有更大的间隙,这是由于使用了分布式对齐方式(如 justify-contentalign-content)造成的。

浏览器支持

特性查询通常是检查浏览器是否支持特定属性的好方法,但在这种情况下,如果你在弹性盒布局中检查 gap 属性,你可能会得到一个误报,因为特性查询不会区分布局模式。换句话说,它可能在弹性盒布局中受支持,这会导致结果为正,但如果它在网格布局中使用,则实际上不受支持。

网格布局

IEEdgeFirefoxChromeSafariOpera
不支持16+61+66+12+53+
iOS SafariOpera MobileAndroid 浏览器Chrome for AndroidFirefox for Android
12+不支持81+84+68+

使用 calc() 值的网格布局

IEEdgeFirefoxChromeSafariOpera
不支持84+79+84+不支持69+
iOS SafariOpera MobileAndroid 浏览器Chrome for AndroidFirefox for Android
不支持不支持81+84+68+

使用百分比值的网格布局

IEEdgeFirefoxChromeSafariOpera
不支持84+79+84+不支持69+
iOS SafariOpera MobileAndroid 浏览器Chrome for AndroidFirefox for Android
不支持不支持81+84+68+

弹性盒布局

使用 gap 与弹性盒布局的规范目前处于工作草案状态。

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该特性。

桌面

ChromeFirefoxIEEdgeSafari
8463不支持8414.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712714.5-14.8

多列布局

IEEdgeFirefoxChromeSafariOpera
不支持84+79+84+不支持69+
iOS SafariOpera MobileAndroid 浏览器Chrome for AndroidFirefox for Android
不支持不支持81+84+68+

更多信息