如何优雅地使用CSS gap属性
Gwolf
  2023-03-20 13:39:02 2023-03-20 13:39   2023-03-20 13:39:02    1.3k Words

写在前面

在这篇文章中，我们将探讨CSS gap属性的用法，它可以很容易地在元素之间添加间距，并解决多年来困扰开发人员的布局问题。

gap是用来解决什么问题的？

gap属性允许我们在元素之间水平和垂直添加间距。在这之前我们一直是使用margin。但是，使用margin来分隔元素可能有一个问题——尤其是当元素跨行换行时——因为总会有最后一个元素会有不想要的页边距。

下面的例子展示了四个div，他们设置了右、下边距：

1
2
3
article > div {
  margin: 0 10px 10px 0;
}

图1

是否注意到容器的背景沿着右边和底部伸出来了一小块吗?

gap属性只在元素之间放置间距，这使得布局更容易。下面是与上面相同的布局，但这次使用gap而不是margin:

1
2
3
4
article {
  display: grid;
  gap: 10px;
}

图2

这样右边和底部就不会有多出的那一块了。现在的间距只存在于元素之间，元素可以紧贴地放在它们的容器中。

我们可以在三种不同的布局模式下使用gap: Grid、Flex和multi-columns，我们会在下面的几个例子中依次查看。

使用gap的细节指南

使用gap可以直接写gap: 10px，非常简单。(详情见上面的例子)，现在大家一起来看看这意味着什么。

gap属性可以接受两个值:行间隙(即元素行之间的空间)和列间隙(元素列之间的空间):gap: 。

图3

如果我们只指定一个值，它将同时应用于任何行和列。

间隙的值可以是任何长度单位(如px, em, vw)，百分比单位，甚至是用calc()函数计算的值。

如何在Flexbox布局中使用gap

最初在Flexbox里，没有间隙属性，所以我们不得不使用margin。值得庆幸的是，在Flexbox中使用gap现在是主流，并且在现代浏览器中得到了很好的支持。

我们可以像使用Grid一样使用它:

1
2
3
4
5
article {
  display: flex;
  gap: 2vw 1vw;
  flex-wrap: wrap;
}

图2

在我们的flex子元素响应式换行的情况下，间隙将根据需要平均分配空间，并且通常不会垂直和水平对齐，如下图所示。

图4

如果我们想让间隙水平和垂直排列，最好使用Grid网格布局。

与Grid一样，如果我们只想要列或行之间的间隙，就可以分别使用column-gap和row-gap。

如何在多列布局使用gap

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

1
2
3
4
article {
  column-count: 2;
  gap: 3em;
}

图5

(我们可以试着在上面的例子中删除gap，看看会发生什么。)

因为我们这里只需要处理列，所以只应用了列间隙值，因为没有行可以应用这个值。

为了让它更好看一些，我在这些列之间添加一条垂直线:

1
2
3
4
5
article {
  column-count: 2;
  gap: 3em;
  column-rule: 1px solid #e7e7e7;
}

图6

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

关于gap需要知道注意事项

Grid布局的gap最初被称为Grid-gap，有Grid-row-gap和Grid-column-gap的缩略形式。虽然这些属性现在仍然可以使用，但最好还是使用gap，因为它现在适用于Grid网格布局, Flexbox和多列布局。

多列布局有一个旧的列间隙属性，也仍然可以使用。不过还是那句话，在所有情况下记住gap更简单。

gap可以设置为百分比，但百分比是根据什么条件去设置的呢？这实际上取决于很多情况，而且很难一句话说清楚。可以下去一点点研究。一般来说，除非特殊情况，否则还是尽量避免设置gap百分比。

Flexbox里的对其属性(如justify-content和align-content)也用于在Grid和Flexbox布局中分隔元素，在某些情况下，它们会把元素分隔得比gap值更大。尽管如此，gap仍然很有用，因为它至少在较小的屏幕上提供了元素之间的最小空隙。

为什么不用gap分隔所有元素呢?

上面我们可以得知，gap解决了一些与margin的一些痛点，这些问题也会影响文本等内容。例如，如果对段落和标题使用margin-bottom，则在最后一个元素之后会得到不需要的地编剧，或者如果使用margin-top，则可能会在第一个元素上得到不需要的顶部边距。虽然会有一些的方法可以在CSS中处理这个问题，但它仍然是一个繁琐的过程，所以一些开发人员决定使用gap来代替。

但是这有一个缺点：所有元素的间距都是相同的，元素之间的间距变化会更具视觉吸引力。

写在最后

当使用Grid, Flexbox和多列布局时，gap是一个方便的工具，用于分隔元素。它使我们不必使用那些繁琐的技巧，但不要过度使用!

  1. 写在前面
  2. gap是用来解决什么问题的？
  3. 使用gap的细节指南
  4. 如何在Flexbox布局中使用gap
  5. 如何在多列布局使用gap
  6. 关于gap需要知道注意事项
  7. 为什么不用gap分隔所有元素呢?
  8. 写在最后