Chromium 导致 Flexbox 出现差距

CSS gap 属性适用于 Chromium 的 CSS Flexbox 和多列布局引擎。

Adam Argyle

David Grogan

CSS Gap

关键术语： gap 是子元素之间的间距。您可能听说过这种间距被称为“边线”或“巷道”。它仅在子框边缘相接触时才会出现。

gap 是相对于流的，这意味着它会根据内容流的方向动态变化。例如，gap 会自动根据您为国际用户设置的不同 writing-mode 或 direction 值进行调整。这大大减轻了组件和 CSS 作者在间距方面面临的挑战。进一步缩减代码量。

演示了本地化支持的 Gap，因为它会处理方向和书写模式的更改： Codepen | Tweet

浏览器兼容性

浏览器支持

• 57
• 16
• 52
• 10.1

来源

用法

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

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

可以为 Gap 传递 1 个长度，该长度将同时用于行和列。

简写

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

同时设置行和列

已展开

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

Gap 可以传递 2 个长度，分别用于行和列。

简写

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

同时单独设置行和列

已展开

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

Flexbox gap

在 Flexbox 中引入 gap 之前，策略涉及负边距、复杂选择器、: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;
}

注意 ：间距所有权从子级转移到父级

在前两个示例（不使用 Flexbox gap）中，系统会定位子项并为其分配与其他元素之间的间距。在解毒剂间隔示例中，容器拥有间距。每个子元素都可以减轻负担，同时集中管理间距所有权。简化一致性。重新排序、更改视口、移除元素、附加新元素等，间距保持一致。无需新的选择器和新的媒体查询，只有空格。

Chromium DevTools 更新

随着这些更新，Chromium DevTools 也发生了变化，请注意 Styles 窗格现在如何处理 grid-gap 和 gap 👍?

Devtools 会同时显示 grid-gap 和 gap，其中 gap 显示在 grid-gap 下方，以便让级联使用最新的语法。

开发者工具同时支持 grid-gap 和 gap，这是因为 gap 本质上是之前语法的别名。

新的布局潜力

借助 Flexbox gap，我们解锁的不仅仅是便捷。我们解锁了功能强大、 间距完美的固有布局在视频和以下代码示例中，Grid 无法实现 Flexbox 可以实现的布局。网格必须有相同的行数和列数，即使它们是固有分配的也是如此。

在 Twitter 上发布

此外，请注意，当子项以这种方式进行内在换行时，子项之间的间距是多么动态。媒体查询无法检测到此类换行，因此无法做出智能调整。 Flexbox gap 可以并且将会跨所有国际化为您效劳。

多列 gap

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

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

还挺有意思的。