如何使用CSS GAP属性

CSS gap 属性：轻松掌控元素间距

核心要点

• CSS gap 属性让开发者轻松控制元素间的水平和垂直间距，解决了许多布局难题，简化了边距管理。它兼容网格布局、Flexbox 布局和多列布局。
• gap 属性可接受两个值：行间距和列间距。只指定一个值时，该值将同时应用于行和列。间距值可以是任何长度单位、百分比单位，甚至使用 calc() 函数计算的值。
• gap 属性适用于 CSS 网格、Flexbox 和多列布局。它在响应式布局中无缝工作，间距方向会根据盒子排列自动调整。通过设置文本容器为 display: grid 并添加 gap 值，也可以用于设置文本元素的间距。
• 虽然网格布局的 gap 属性最初称为 grid-gap，但最好坚持使用 gap，因为它现在适用于网格、Flexbox 和多列布局。但是，在某些情况下，justify-content 和 align-content 等对齐属性可以使项目间距超过 gap 值。还要注意，gap 不接受负值。

本文将深入探讨 CSS gap 属性的用法，它能轻松添加元素间距，解决困扰开发者多年的许多布局问题。

gap 属性的用途

gap 属性允许我们在元素之间添加水平和垂直间距。当然，我们一直都可以使用 margin 来实现这一点。但是，使用 margin 来设置项目间距可能会很麻烦——尤其是在项目换行时——因为最后一个项目总是会有多余的边距。

下图展示了四个使用左右和底部边距来设置间距的 div：

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

请查看 CodePen 上的示例：The CSS gap Property: using margin instead of gap

注意容器的背景在右侧和底部突出显示了吗？

gap 属性只在项目之间添加间距，这使得布局变得非常容易。以下是与上面相同的布局，但这次使用 gap 代替 margin：

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

请查看 CodePen 上的示例：The CSS gap Property: spacing items with gap shorthand

现在我们不会在右侧和底部出现难看的多余间距了。间距现在只在项目之间，项目紧密地排列在容器内。

我们可以将 gap 与三种不同的布局模式一起使用：网格、Flexbox 和多列。我们将在下面依次介绍每种模式。

使用 gap 属性的指南

使用 gap 就像编写 gap: 10px 一样简单。（我们在上面的演示中看到了这样做的结果。）但是让我们看看这意味着什么。

gap 属性可以接受两个值：行间距（即元素行之间的间距）和列间距（即元素列之间的间距）：gap: <row-gap> <column-gap></column-gap></row-gap>。

如果我们只指定一个值，它将应用于所有行和列。

我们也可以使用 row-gap 和 column-gap 属性分别指定列间距或行间距。

gap 的值可以是任何长度单位（例如 px、em、vw）、百分比单位，甚至使用 calc() 函数计算的值。

如何在 CSS 网格中使用 gap 属性

我们在上面看到一个使用 gap 与网格布局的示例。让我们尝试另一个使用不同单位的示例：

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

请查看 CodePen 上的示例：The CSS gap Property: using gap with Grid longhand

这次，我们为行和列使用了不同的单位。

gap 的一个额外好处是它可以在响应式布局中无缝工作。如果我们在两个项目之间设置了间距，那么无论这些项目是并排排列还是上下排列，该间距都将适用，如下面的示例所示。

请查看 CodePen 上的示例：Untitled

按下上面 CodePen 底部的 0.5x 按钮，或者在浏览器中打开 CodePen 并加宽和缩窄视口，以查看间距方向如何根据盒子的排列进行调整。我们在这里受益于 gap 属性上的单一值，它可以应用于行和列。如果我们不希望在较小的屏幕上出现行间距，我们可以改为设置 column-gap: 10px。请在上面的 CodePen 中尝试此操作。

有关如何使用网格布局的更多信息，请查看我们的 CSS 网格布局入门指南。

如何在 Flexbox 中使用 gap 属性

当 Flexbox 首次出现时，它没有 gap 属性，因此我们不得不求助于古老且令人痛苦的 margin 使用方法。谢天谢地，现在在现代浏览器中使用 gap 与 Flexbox 已经成为主流并且得到了很好的支持。

我们可以像在网格中一样使用它：

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

请查看 CodePen 上的示例：The CSS gap Property: using gap with Flexbox

在我们的 Flex 项目响应式换行的情况下，gap 设置将根据需要重新调整，并且通常不会同时在垂直和水平方向上对齐，如下面的示例所示。

请查看 CodePen 上的示例：The CSS gap Property: using gap with a responsive Flexbox layout

如果我们希望间距在水平和垂直方向上对齐，最好使用网格。

与网格一样，如果我们只想在列或行之间设置间距，我们可以分别使用 column-gap 和 row-gap。

如何在多列布局中使用 gap 属性

多列布局将内容组织成列，但默认情况下，这些列将具有浏览器设置的 1em 间距。我们可以使用 gap 属性来设置我们首选的间距宽度：

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

请查看 CodePen 上的示例：The CSS gap Property: using gap in a multi-column layout

（尝试从上面的 CodePen 中删除 gap 属性，看看会发生什么。）

因为我们这里只处理列，所以只应用列间距值，因为没有行可以应用此值。

为了好玩，我们还在这些列之间添加一条垂直线：

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

请查看 CodePen 上的示例：The CSS gap Property: using gap and column-rule in multi-column layout

请注意，column-rule 是 column-rule-width、column-rule-style 和 column-rule-color 的简写。

关于 gap 属性的有用信息

网格布局的 gap 属性最初称为 grid-gap，其完整形式为 grid-row-gap 和 grid-column-gap。虽然这些属性仍然有效，但最好坚持使用 gap，因为它现在适用于网格、Flexbox 和多列布局。

多列布局有一个较旧的 column-gap 属性，该属性也仍然有效。但是，再次强调，在所有情况下记住 gap 更容易。

可以将间距设置为百分比值，但百分比是相对于什么的百分比？它实际上取决于许多因素，而且可能很难预测。您可以在规范中进一步探索这一点。作为一般规则，除非您真的知道自己在做什么，否则最好避免在 gap 中使用百分比。

justify-content 和 align-content 等对齐属性也可以在网格和 Flexbox 布局中使元素分开，并且在某些情况下，它们会使项目间距超过 gap 值。但是，gap 值仍然有用，因为它至少在较小的屏幕上提供了元素之间的最小间距。

为什么不使用 gap 来设置所有元素的间距？

如上所述，gap 解决了一些与边距间距相关的烦人问题。这些边距问题也可能影响文本等内容。例如，如果我们使用底部边距来设置文本元素（例如段落和标题）的间距，则在最后一个元素之后会出现多余的边距，或者如果我们使用顶部边距，则第一个元素可能会出现多余的顶部边距。在 CSS 中有一些简单的方法可以解决这个问题，但这仍然很麻烦，一些开发者决定改用 gap。

要使用 gap 来设置文本元素的间距，我们只需将文本容器设置为 display: grid 并添加 gap 值：

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

<code><p></p>、<h1></h1>、<h2></h2> 和 <hr> 元素现在都是网格项目。请查看 CodePen 上的示例：The CSS gap Property: spacing text content with gap

但是我们应该这样做吗？一个缺点是所有元素的间距都相同，而改变元素之间的间距，尤其是在标题周围，在视觉上可能更具吸引力。不过，将 gap 用于此仍然是一个有趣的想法。要进一步探索这一点，请查看 Kevin Powell 关于使用 gap 设置文本间距的非常有趣的视频。

总结

gap 属性是在使用网格、Flexbox 和多列布局时设置项目间距的便捷工具。它使我们不必再使用旧的混乱的 margin 方法。它可以在设计中以创造性的方式使用，但不要过度使用它！

进一步阅读

• 阅读有关 CSS 网格布局的更多信息
• 阅读有关 Flexbox 布局的更多信息
• 阅读有关 CSS 多列布局的更多信息
• 阅读 CSS Box Alignment Module Level 3 规范或 MDN 上关于 gap 属性的信息

CSS gap 属性常见问题解答

什么是 CSS gap 属性？

CSS gap 属性是 row-gap 和 column-gap 的简写属性。它指定网格、Flex 或多列布局中行和列之间的间距大小。此属性在创建视觉上吸引人且结构良好的 CSS 布局方面特别有用。它有助于在设计元素中保持一致的间距和对齐。

CSS gap 属性是如何工作的？

CSS gap 属性通过设置行和列之间的间距（空隙）大小来工作。您提供的第一个值将设置行间距，第二个值将设置列间距。如果您只提供一个值，它将把行间距和列间距都设置为该值。例如，gap: 10px 20px 将行间距设置为 10px，列间距设置为 20px。

我可以在 Flexbox 中使用 CSS gap 属性吗？

是的，您可以在 Flexbox 中使用 CSS gap 属性。它允许您在 Flex 项目之间创建间距。但是，请注意，此功能可能并非在所有浏览器中都受支持，尤其是在较旧的浏览器中。在使用它之前，请务必检查浏览器兼容性。

CSS 中的 gap 和 grid-gap 有什么区别？

grid-gap 属性是 grid-row-gap 和 grid-column-gap 的简写属性，专用于网格布局。但是，CSS 网格布局模块级别 2 已将 grid-gap 替换为 gap。现在，gap 可用于网格、Flex 和多列布局。

如何在响应式设计中使用 CSS gap 属性？

可以通过使用相对单位（如百分比或视口单位）来设置 CSS gap 属性，从而在响应式设计中使用它。这样，间距大小将根据视口或父元素的大小进行调整，使您的布局具有响应能力。

我可以在 CSS gap 属性中使用负值吗？

不可以，您不能在 CSS gap 属性中使用负值。gap 属性只接受非负值。如果您尝试使用负值，它将被忽略，并将使用默认值。

CSS gap 属性的默认值是什么？

CSS gap 属性的默认值是 normal，这意味着浏览器将确定间距的大小。但是，您可以通过指定所需的间距大小来覆盖此默认值。

我可以在多列布局中使用 CSS gap 属性吗？

是的，您可以在多列布局中使用 CSS gap 属性。它允许您设置多列布局中列之间的间距。

CSS gap 属性是否继承？

不，CSS gap 属性不会继承。这意味着为父元素指定的间距大小不会应用于其子元素。

我可以在 CSS gap 属性中使用哪些单位？

您可以在 CSS gap 属性中使用多个单位，包括像素 (px)、em (em)、rem (rem)、百分比 (%) 和视口单位 (vw、vh)。每个单位都有其自身的用例，可以根据您的特定需求使用。

请注意，所有CodePen链接均为占位符，需要替换为实际可用的链接。

以上是如何使用CSS GAP属性的详细内容。更多信息请关注PHP中文网其他相关文章！