旧版Safari（≤14.1）对Flexbox存在规范断层：display: flex不被识别，必须写display: -webkit-flex；gap被静默忽略；flex: 1因flex-basis: auto坍缩为0，需配合flex-basis: 0px和min-height: 0；负margin模拟gap时须加overflow: hidden、min-width: 0及box-sizing: border-box。
旧版 Safari（≤14.1）对 Flexbox 的支持不是“不完美”，而是部分特性根本不存在——gap 被静默忽略、flex: 1 可能坍缩为 0、display: flex 本身就不被识别。靠猜或只加一两个前缀，大概率白忙。
为什么 display: flex 在 Safari 里完全不生效
这不是 bug，是规范断层：Safari 9–13.1 实现的是旧版 Flexbox 草案，只认 display: -webkit-flex。只写标准语法，等于没写。
-
display: -webkit-flex必须写在display: flex前面，旧 Safari 会忽略后面那行 -
justify-content、align-items、flex-wrap等所有容器级属性，都得配对应-webkit-版本，比如-webkit-justify-content: center -
flex缩写属性也要写-webkit-flex: 1，不能只靠 autoprefixer —— 它默认不覆盖 iOS Safari ≤13.3，除非browserslist明确包含ios_saf >= 11.3或safari >= 10 - 用
npx browserslist验证配置是否真命中旧 Safari，别信“last 2 versions”这种模糊描述
flex: 1 在 Safari 里撑不满高度？先看 min-height: 0
旧 Safari 把 flex: 1 解析成 flex: 1 1 auto，而 flex-basis: auto 在父容器高度未锚定时，直接算出 0。这不是缩放 Bug，是初始尺寸推断逻辑不同。
- 必须显式写
flex-basis: 0px（不能写0%，Safari 会忽略），配合min-height: 0（垂直布局）或min-width: 0（水平布局） - 父容器要有确定高度：比如
height: 100vh，或position: absolute下用top/bottom固定尺寸 - 子项若有
<img alt="如何修复CSS Flex布局在旧版Safari浏览器中的渲染兼容性问题？" >，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算 - 避免混用
width: 100%和flex: 1，Safari 优先按 width 计算，flex-grow直接失效
gap 不生效时，负 margin 方案必须带 overflow: hidden
Safari ≤14.1 压根不解析 gap，写了等于没写。@supports (gap: 0) 在 Safari 14.1 下会误判为支持，实际仍跳过声明——检测不可靠，直接 fallback 更稳。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 目标
gap: 16px→ 容器设margin-left: -8px; margin-right: -8px，子项设margin-left: 8px; margin-right: 8px - 容器必须加
overflow: hidden，否则负 margin 可能触发意外水平滚动条 - 每个子项必须加
min-width: 0和box-sizing: border-box，否则内容撑宽或 padding+border 会导致尺寸失控 - 别用
:not(:first-child)清首项 margin —— iOS Safari 13.x 和 Android WebView 不支持，改用:nth-child(n+2)
margin: auto 居中失效？拆开写或换 align-self
Safari 12–13.1 不支持在 flex item 上用 margin: auto 实现居中，这不是兼容性开关问题，是规范实现缺失。
- 水平居中改用
margin-left: auto; margin-right: auto（Safari 支持这个拆分写法） - 垂直居中优先用
align-self: center，前提是父容器已设align-items: stretch（默认值）且主轴为水平 - 如果父容器是
flex-direction: column，则用justify-self: center或margin-top: auto; margin-bottom: auto - 绝对定位降级方案：
position: absolute; inset: 0; margin: auto，但注意inset是 Safari 14.1+ 才支持
真正卡住人的，往往不是单个属性怎么写，而是 Safari 旧引擎对「默认值」的激进处理：min-width: auto、min-height: auto、flex-basis: auto 这些看似无害的隐式值，在旧 WebKit 里全是布局坍塌的导火索。实机调试比查文档更管用，尤其要盯紧 DevTools 的 Computed 面板里 gap 是否为空、flex-basis 是否被重写、min-height 是否被继承覆盖。
