译: 使用CSS Gap属性简化样式布局

本文翻译至: Closing the Gap: Simplify Your Web Layouts with the CSS Gap Property

参考文章:

Gap - MDN

边距就是间距

就像软件开发中的许多事情一样，对于某些方法和偏好也存在相反的观点和阵营。其中一种情况是使用 CSS Margin，可以仅使用 margin-top 或使用 margin-bottom。

如今，最好地方法是使用 CSS 逻辑属性和值，但使用哪种策略的问题目前也只是一个意见。

顺从经典的流式布局

正如你们中许多人可能知道的那样，DOM 布局的自然流（或正常流）是从上到下的。也就是说，任何块元素都将放置在前一个块的下方，而任何内联元素都将是紧密挨着(内联)的。

如以下示例：

这就是为什么许多前端开发人员可能更喜欢使用 margin-bottom，因为它感觉更自然。

CSS Gap 概述

CSS Gap 属性为希望创建视觉上吸引人且有组织的 Web 布局的 Web 开发人员提供了多种好处。

它简化了布局，提高了可读性，支持响应式设计，降低了代码复杂性，并提高了浏览器性能。Gap属性定义 flexbox、grid 或多列布局中的行和列之间的间隙大小。它是 row-gap 和 column-gap 属性的简写。

使用 Gap 而不是 Margin 的好处

使用 CSS Gap属性代替Margin有几个优点：

1. 简化布局

以前，开发人员必须使用 margin 或 padding 在元素之间创建空间，这可能非常耗时并导致布局不一致。 CSS Gap 属性通过提供一种简单有效的方法来在元素之间添加空间而不影响其大小，从而消除了这个问题。

2. 更简单的响应式设计

Gap 可以更轻松地处理响应式设计中的间距，而无需复杂的计算或额外的wrapper元素。

3. 降低代码复杂性

您可以使用 CSS Gap属性通过一行代码实现相同的效果，而不是使用多个 CSS 属性在元素之间创建空间。

4. 更好的浏览器性能

CSS Gap属性可以通过减少在元素之间创建空间所需的代码量来提高网站的性能。这可以带来更快的加载时间和更好的整体性能。

5.不需要负Margin或伪选择器

使用Gagp属性不需要考虑负边距或使用伪选择器来删除第一个或最后一个元素边距。

史蒂夫在这段视频中对此做了很好的解释：

Gap与Margin视觉上的差异

为了更好地说明使用 CSS Gap属性和边距之间的差异，让我们考虑一个具有 Flexbox 布局的最小示例：

使用Margin的示例

<section class="margin-example">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</section>

.margin-example {
  display: flex;
  flex-wrap: wrap;
}

.margin-example div {
  width: 200px;
  margin: 0 10px;
  background: rebeccapurple;
  color: white;
}

.margin-example div:first-child,
.margin-example div:last-child {
  margin: 0;
}

结果如下:

result

根据您使用的设备查看此内容，这可能在你的设备上看起来很糟糕。因为上面相应的Margin代码仅考虑Desk设备的尺寸。

结果在移动设备上显示就出现问题了，如下图所示：

mobile

我们该如何解决这个问题？我们可以添加媒体查询来处理移动设备上的情况。最初的想法是将 margin-left 和 margin-right 切换为 margin-top 和 margin-bottom 值：

@media only screen and (max-width: 425px) {
 /* CSS styles for mobile devices */
  .margin-example div {
    margin: 10px 0;
  }
}

效果: mobile

但这仍然不对。

当我们调整视口窗口的大小时，它在不同的屏幕尺寸下的显示也很愚笨，如下所示：

当我们到达媒体查询的断点时就会出错。突然的，盒子的大小发生变化，当我们的移动屏幕尺寸到更大的时候，第二个和第三个盒子之间的空间比我们预期的要大。

导致我们需要做更多的工作来使响应的显示正确。

使用Gap的示例

<section class="gap-example">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</section>

.gap-example {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.gap-example div {
  width: 200px;
  background: rebeccapurple;
  color: white;
}

首先，与使用边距相比，使用 CSS Gap属性会产生更干净、更简洁的代码。

响应式也没任何问题！

另一个例子

假设您有一个包含多个元素的网格布局：

<section>
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</section>

要创建响应式设计并在元素之间添加空隙，您可以使用 CSS Gap属性：

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

这将在行和列之间创建 20px 的间隙，使布局更具视觉吸引力且更易于管理：

CSS Gap属性是一个强大的工具，可以简化您的网页布局并使其在视觉上更具吸引力。通过使用Gap属性而不是Margin，您可以降低代码复杂性，提高浏览器性能，并创建更一致和响应更快的设计。因此，下次您在处理 Web 布局时，请考虑使用 CSS Gap 属性，让开发人员的生活更轻松，布局更高效。

End.