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不会应用任何东西，因此该解决方案无法工作。
我正在寻找一致性，因为如果我们开始将gap应用于flexbox容器，这将是一个巨大的问题，并且它在浏览器的新实现中工作，但在规范的旧实现中却无法测试支持。
我不是在寻找JavaScript解决方案。
3条答案
按热度按时间m0rkklqb1#
据我所知，没有办法做到这一点。这仍然是一个开放的讨论
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
wd2eg0qa2#
旧帖子，但无论如何-除了新的MacOS和iOS支持Flexbox的“gap”之外，您仍然需要为旧版本的MacOS和iOS提供它。基本上，使用@supports（gap：...）不会给予任何正确的结果，因为Safari认为“哦，那是Gridbox中的一个缺口”。但是-如果你需要做这个检查-你将不需要检查支持“差距”。您可以编写具有所有“间隙”的以前的现代代码，然后使用@support not（aspect-ratio：1 / 1）（例如-你只需要检查旧的Safari是否真的不支持这样的css标签）-然后在里面你可以为旧的Safari写一个回退选项。它工作得很好）
x33g5p2x3#
**免责声明：**我不是说这是一个完美的解决方案，但如果你能允许一个非常小的误差范围，它就足够了。我只会用这个来获得一些像素完美的差距在这里和那里，我不会使用这个，如果你的布局严重依赖于这个，以保持您的页面在一起。
有一篇文章提到了
@supports selector(:first-child)的使用，它可以作为支持flex gap的代理，因为时间轴版本是相同的：对我来说，如果使用得当，它能很好地完成工作，但你需要根据你的项目进行评估。更多可用的细节和学分去这篇文章：https://birdsong.dev/blog/sloppy-supports-for-flexbox-gap/