Chromium 导致 Flexbox 出现差距

针对 Chromium 的 CSS Flexbox 和多列布局引擎，我们提供了 CSS gap 属性。

Adam Argyle

David Grogan

CSS 差距

gap 是相对流动，这意味着它会根据内容流动方向动态变化。例如，gap 会根据您为国际用户设置的不同 writing-mode 或 direction 值自动调整。这可显著减轻组件和 CSS 作者的间距方面的负担。可以减少代码进一步扩展。

浏览器兼容性

用法

gap 接受任何 CSS 长度或百分比作为值。

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

可以为间隔传递 1 个长度，该长度将用于行和列。

.grid {
  display: grid;
  gap: 10px;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

可以为间隔传递 2 个长度，这些长度将用于行和列。

.grid {
  display: grid;
  gap: 10px 5%;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

在 gap 在 Flexbox 中之前，策略涉及负外边距、复杂选择器、:last 或 :first 类型伪类选择器，或用于管理动态布局和封装一组子项空间的其他方式。

之前的尝试

以下是人们用来实现间隙类间距的模式。

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

不过，以上代码不能完全替代 gap，并且通常需要调整 @media 或 :lang()，以便将封装场景、写入模式或方向考虑在内。添加一个或两个媒体查询似乎没那么糟，但它们可能会累加，并导致复杂的布局逻辑。

上述作者实际上打算不触摸任何子项。

解毒之道：差距

.layout {
  display: flex;
  gap: 10px;
}

在前 2 个示例中（不含 Flexbox gap），系统定位了子元素并指定了与其他元素之间的间距。在解毒间隔示例中，容器拥有间距。每个子级都可以减轻自身的负担，同时还可以集中空间所有权。简化一致性。您可以重新排列、更改视口、移除元素、附加新元素等，且间距将保持一致。没有新的选择器，没有新的媒体查询，只有空间。

Chromium 开发者工具更新

Chromium 开发者工具发生了这些更新，请注意 Styles 窗格现在如何处理 grid-gap 和 gap 👍?

DevTools 同时支持 grid-gap 和 gap，这是因为 gap 本质上是先前语法的别名。

新的布局潜力

借助 Flexbox gap，我们解锁的不仅仅是便利。我们解锁了强大、完美的内在布局在下面的视频和以下代码示例中，Grid 无法实现 Flexbox 可以实现的布局。网格必须有相等的行和列，即使它们是固有分配的。

另请注意，当子项本身以这种方式封装时，子项之间的间距是动态变化的。媒体查询无法检测这样的封装来进行智能调整。Flexbox gap 可以并且将会支持您在所有国际化环境中使用。

多列 gap

除了 Flexbox 支持 gap 语法之外，多列布局还支持较短的 gap 语法。

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

相当好看。