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

Posted 2023-03-06

【中文标题】如何检查 Flexbox 布局中的间隙支持

【英文标题】：How to Check for Gap Support in Flexbox Layout

【发布时间】：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 仍会将间隙应用到 f​​lexbox 容器，而 Chrome 不会应用任何内容，因此该解决方案不起作用。

我正在寻找一致性，因为如果我们开始将间隙应用于 flexbox 容器，这将是一个巨大的问题，并且它适用于浏览器的新实现，但不适用于规范的旧实现，无法测试支持。

我不是在寻找 javascript 解决方案。

【问题讨论】：

为什么在 gap 得到很好的支持之前不使用支持的功能构建布局？

for flexboxes gap 仅与 flex 项 填充 flex 轴 以及它们 wrap 的布局相关 分成多行.. 为什么不改用margin - 请参阅一些示例here、here 和here

布局已经使用 flexbox 和边距作为不支持网格的浏览器的默认值构建。对于支持网格的浏览器，有渐进增强（使用@supports）来使用间隙和网格并摆脱边距。问题是 Firefox 支持网格，但它也支持 flexbox 上的间隙。所以我无法摆脱负边距。那么没有 JavaScript 就没有办法区分浏览器 CSS 对 flexbox 中间隙的支持吗？因为这正是 @supports 的设计初衷。

【参考方案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

【参考方案2】：

旧帖子，但无论如何 - 除了新的 MacOS 和 ios 支持 Flexbox 的“gap”之外，您仍然需要为旧版本的 MacOS 和 iOS 提供它。基本上，使用 @supports (gap: ... ) 进行简单检查不会给出任何正确的结果，因为 Safari 认为“哦，那是 Gridbox 中的一个差距”。但是——如果你需要做这个检查——你不需要检查对“gap”的支持。您可以使用所有“差距”编写以前的现代代码，然后只使用 @support not (aspect-ratio: 1 / 1 )（例如 - 你只需要检查旧的 Safari 是否真的不支持这样的 css 标签） - 然后在里面你可以为旧的 Safari 写一个后备选项。效果很好）