【发布时间】：2019-08-18 15:25:23
【问题描述】：
Firefox 已经为 flexbox 布局实现了gap，而其他浏览器如 Chrome 仅支持gap 用于网格布局。如果您在 flexbox 容器上添加 gap，这会导致浏览器之间的差异。 CSS @supports 功能用于处理浏览器尚不支持某些功能的情况。那么如何在 flexbox 中测试对gap 的支持呢？
<style>
.flex {
display: flex;
gap: 20px;
}
</style>
<section class="flex">
<div>Item One</div>
<div>Item Two</div>
</section>
请注意：即使我使用 @supports grid-gap 而不是 gap，Firefox 仍会将间隙应用到 flexbox 容器，而 Chrome 不会应用任何内容，因此该解决方案不起作用。
我正在寻找一致性，因为如果我们开始将间隙应用于 flexbox 容器，这将是一个巨大的问题，并且它适用于浏览器的新实现，但不适用于规范的旧实现，无法测试支持。
我不是在寻找 JavaScript 解决方案。
【问题讨论】：
-
为什么在 gap 得到很好的支持之前不使用支持的功能构建布局？
-
布局已经使用 flexbox 和边距作为不支持网格的浏览器的默认值构建。对于支持网格的浏览器，有渐进增强（使用@supports）来使用间隙和网格并摆脱边距。问题是 Firefox 支持网格，但它也支持 flexbox 上的间隙。所以我无法摆脱负边距。那么没有 JavaScript 就没有办法区分浏览器 CSS 对 flexbox 中间隙的支持吗？因为这正是 @supports 的设计初衷。