html - 如何检查 Flexbox 布局中的间隙支持

Question

Firefox 已实现 gap用于 flexbox 布局，而其他浏览器如 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 解决方案。

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