针对 Chromium 的 CSS Flexbox 和多列布局引擎,我们提供了 CSS gap
属性。
CSS 差距
gap
是相对流动,这意味着它会根据内容流动方向动态变化。例如,gap
会根据您为国际用户设置的不同 writing-mode
或 direction
值自动调整。这可显著减轻组件和 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;
}
相当好看。