如何在Flexbox布局中检查间隙支持

Question

Firefox已经实现gap了Flexbox布局，而其他浏览器（例如Chrome）仅支持gap网格布局。如果gap在flexbox容器上添加，这会导致浏览器之间的差异。CSS @supports功能旨在处理浏览器尚不支持某些功能的情况。那么，如何测试对gapFlexbox的支持？

<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解决方案。

Answer 1

据我了解，没有办法实现这一点。这仍然是一个开放的讨论

https://github.com/w3c/csswg-drafts/issues/3559。

https://medium.com/@schofeld/mind-the-flex-gap-c9cd1b4b35d8

附加说明：您可能希望为添加 Chromium 支持的请求加注星标：

https://bugs.chromium.org/p/chromium/issues/detail?id=762679