为什么CSS Flex容器的gap属性在某些移动端版本不工作？-css教程-PHP中文网

flex容器gap在旧版浏览器（如safari≤14.1、ios safari≤14.5、android webview≤76）中完全不被解析，需通过devtools灰显、computed面板显示not supported或getcomputedstyle(el).gap返回空字符串来实锤确认；伪支持陷阱下须用@supports(grid-row-gap:0)and(row-gap:0)双条件检测，降级方案必须包含overflow:hidden、min-width:0和box-sizing:border-box三要素。

为什么css flex容器的gap属性在某些移动端版本不工作？

Flex容器的gap在某些移动端不工作，不是你写错了，是浏览器压根不解析它——Safari ≤14.1、iOS Safari ≤14.5、Android WebView ≤76 这些内核对 Flex 的 gap 属于“完全无视”，声明被跳过，连报错都没有。

怎么确认真是浏览器不支持，而不是CSS写错了？

别靠“看起来没效果”下结论，三步实锤：

DevTools → Elements 面板选中容器，看 Styles 里 gap 是否灰显或带删除线
切到 Computed 面板搜 gap，值为空或标着 not supported
控制台运行 getComputedStyle(el).gap，返回 "" 或 "normal"

排除伪失效：检查是否漏了 display: flex（不是 inline-flex），有没有拼错成 gab，单位是否缺失（如 gap: 12 而非 gap: 12px），子项是否用了 display: contents 破坏盒模型。

为什么 @supports (gap: 0) 在 Safari 14.1 会骗人？

Safari 14.1 是个“伪支持”陷阱：它对 @supports (gap: 0) 返回 true，但只在 Grid 中生效，Flex 容器里的 gap、row-gap、column-gap 全部静默忽略。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须用双条件检测才能绕过：

@supports (grid-row-gap: 0) and (row-gap: 0) {
  .flex-container { gap: 16px; }
}
@supports not ((grid-row-gap: 0) and (row-gap: 0)) {
  .flex-container {
    margin-left: -8px;
    margin-right: -8px;
    overflow: hidden;
  }
  .flex-container > * {
    margin-left: 8px;
    margin-right: 8px;
    min-width: 0;
    box-sizing: border-box;
  }
}

单写 @supports (gap: 0) 就会掉进坑里，降级逻辑被跳过，布局直接错乱。