为什么CSS Flexbox布局在旧版Safari中失效？如何修复？-css教程-PHP中文网

旧版 safari（≤14.1）压根不解析 display: flex 和 gap，必须用 -webkit-flex 前缀触发引擎，并以 @supports (grid-row-gap: 0) and (row-gap: 0) 双条件检测替代单 gap 检测，降级时需同时满足 overflow: hidden、min-width: 0、box-sizing: border-box 及均分负边距四要素。

为什么css flexbox布局在旧版safari中失效？如何修复？

旧版 Safari（≤14.1）不是“部分不兼容”，而是压根不认识 display: flex 和 gap 这些语法——写了等于没写，必须用 display: -webkit-flex 触发底层 Flex 引擎，否则整个容器退化为普通块级元素。

display: flex 在 Safari ≤13.1 中被完全忽略

Safari 9–13.1 实现的是 2012 年草案规范，只认 display: -webkit-flex。写了 display: flex 但没加前缀，DevTools 里 justify-content、flex-direction 全部标灰或显示 invalid，子项堆成一列，就是这个原因在起作用。

display: -webkit-flex 必须放在 display: flex 前面，顺序不能颠倒
所有配套属性也要加前缀：-webkit-flex-direction、-webkit-justify-content、-webkit-align-items、-webkit-flex-wrap
flex 简写属性在 iOS 8.4 及更早版本中被彻底跳过，必须拆成 -webkit-flex-grow、-webkit-flex-shrink、-webkit-flex-basis
autoprefixer 不会自动拆解 flex: 1，即使配置了 ios_saf >= 8，它只加 -webkit-flex: 1，而旧内核根本不识别这个值

gap 在 Safari ≤14.1 中根本不存在

gap 不是“不生效”，是解析器直接跳过该声明。Safari 14.1 更危险：它让 @supports (gap: 0) 返回 true，但实际仍忽略 gap，导致降级逻辑失效，换行后子项错位甚至塌陷。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

用 DevTools 实锤：gap 显示灰色带删除线，或 getComputedStyle(el).gap 返回空字符串 ''，就确认不支持
必须用双条件检测：@supports (grid-row-gap: 0) and (row-gap: 0)，单条件不可靠
手动模拟 gap: 16px 需四要素同时满足：overflow: hidden（防滚动）、min-width: 0（防内容撑宽溢出）、box-sizing: border-box（防 padding/border 失控）、间隙均分（容器 margin-left: -8px / margin-right: -8px，子项 margin-left: 8px / margin-right: 8px）
别用 :not(:first-child) 清首项 margin——旧 Safari 和 Android WebView 不支持，改用 :nth-child(n+2)

flex-wrap 在 iOS 8.1 以下基本无效

旧版 Safari 对 flex-wrap: wrap 的支持极不稳定：子项可能溢出容器却不换行，或换行后宽度计算错误。这不是 CSS 写错了，是渲染引擎压根没实现该特性。

-webkit-flex-wrap: wrap 在 iOS 8.1 以下多数情况被安静忽略，不报错也不生效
若必须多行布局，优先考虑降级方案：display: -webkit-box（注意 -webkit-box-orient 必须显式设为 horizontal 或 vertical），或用 inline-block + font-size: 0 消除空白符
避免在 Flex 容器上同时设 padding 和 justify-content: center，旧版 WebKit 对参考系判断有 bug，容易偏移
父容器必须显式声明 width 或 max-width，不能依赖 100% 自适应