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