如何检测浏览器是否不支持Flex Gap并添加兼容方案？

首先，你之前用的@supports写法存在问题：with不是CSS特性查询的合法语法，而(gap:1px) and (display:flex)的检测逻辑不准确——有些浏览器支持gap但仅针对Grid布局，不支持Flex下的gap，所以这个查询会误判为支持。

正确的特性检测写法 #

要精确检测浏览器是否支持Flex布局下的gap，可以使用以下两种方式：

方式一：针对Flex的行/列间隙单独检测

/* 正常的Flex Gap样式 */
.flex-box {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 检测不支持Flex下gap的浏览器，添加margin fallback */
@supports not ((display: flex) and (row-gap: 1px)) {
  /* 水平方向间隙：给除第一个子元素外的所有元素加左margin */
  .flex-box > * + * {
    margin-left: 12px;
  }
  /* 多行Flex的垂直间隙：容器加负margin-top，子元素加margin-top */
  .flex-box {
    margin-top: -12px;
  }
  .flex-box > * {
    margin-top: 12px;
  }
}

方式二：结合Grid支持情况做排除

因为早期浏览器仅支持Grid的gap，不支持Flex的gap，所以可以用这个逻辑反向检测：

@supports (display: grid) and not ((display: flex) and (gap: 1px)) {
  /* 同样添加margin fallback样式，和上面一致 */
  .flex-box > * + * {
    margin-left: 12px;
  }
  .flex-box {
    margin-top: -12px;
  }
  .flex-box > * {
    margin-top: 12px;
  }
}

注意事项 #

• 如果你只需要单行Flex布局，那只需要处理水平方向的margin-left即可，不用管垂直方向的负margin。
• 所有fallback的margin值要和你设置的gap值保持一致，避免布局错乱。

内容的提问来源于stack exchange，提问作者kowalkox