Chromium 导致 Flexbox 出现差距

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

Adam Argyle

David Grogan

CSS 间距

关键术语： gap 是子项之间的间距。您可能听说过这种间距被称为“装订边”或“页边”。这是子级框边缘接触的空间。

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

演示本地化支持的 Gap，因为它能处理方向和书写模式的变化： Codepen | 推文

浏览器兼容性

Browser Support

• 57
• 16
• 52
• 10.1

Source

用法

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() 调整，以适应换行场景、书写模式或方向。添加一两个媒体查询似乎没什么问题，但它们可能会累积起来，导致布局逻辑变得复杂。

上述作者的真正意图是让所有子项都不接触。

The Antidote: gap

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

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

在前 2 个示例（没有 Flexbox gap）中，子元素是目标元素，并分配了与其他元素的间距。在“解药间距”示例中，容器拥有间距。每个子级都可以减轻负担，同时集中管理间距所有权。简化一致性。重新排序、更改视口、移除元素、附加新元素等，并且间距保持一致。没有新的选择器，没有新的媒体查询，只有空格。

Chromium 开发者工具更新

这些更新也带来了 Chromium 开发者工具的变化，请注意样式窗格现在如何处理 grid-gap 和 gap 👍

开发者工具会同时显示 grid-gap 和 gap，其中 gap 显示在 grid-gap 下方，以便级联使用最新语法。

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

新的布局潜力

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

发布推文

另请注意，当子级以这种方式自然换行时，它们之间的间距是动态的。媒体查询无法检测到此类换行，因此无法进行智能调整。 Flexbox gap 可以并且将会为您完成所有国际化工作。

多列 gap

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

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

太棒了。