Safari ≤13.1不支持display:flex，14+中flex-wrap与gap组合静默失效；flex-direction:column列高塌陷因flex-basis默认为auto，需显式设0%或-webkit前缀并配min-height和min-width:0。
旧版 Safari（≤13.1）不识别 display: flex，多列布局直接退化为块级堆叠；Safari 14+ 虽支持标准语法，但 flex-wrap + gap 组合仍会静默失效——这不是“偶尔错位”，而是渲染引擎压根没执行 Flex 计算。
为什么 flex-direction: column 在 Safari 中列高塌陷
旧内核对 flex-basis 的默认解析是 auto，而非现代标准的 0%。当父容器无明确高度、子项又含图片或文本时，flex: 1 无法拉伸，导致整列高度归零或严重压缩。
- 必须显式写
flex: 1 1 0或拆解为-webkit-flex-grow: 1; -webkit-flex-shrink: 1; -webkit-flex-basis: 0; - 父容器需有
height或min-height（哪怕只是min-height: 100vh） - 子项若含图片，加
min-height: 0和height: auto，否则 Safari 会按min-height: auto锁死最小高度
flex-wrap: wrap + gap 在 Safari 中完全不生效
gap 属性在 Safari ≤14.1 中被解析器直接跳过，@supports (gap: 0) 检测不可靠（Safari 14.1 会返回 true 却不执行），视觉上表现为换行后列间距消失、首尾项紧贴。
- 禁用
gap，改用负 margin 模拟：margin-left: -8px; margin-right: -8px（容器） +margin-left: 8px; margin-right: 8px（子项） - 必须同步加
overflow: hidden（防负 margin 溢出）和box-sizing: border-box（防 padding 干扰） - 避免用
:not(:first-child)清除首项 margin——旧 Safari 不支持该伪类，改用:nth-child(n+2)
为什么写了 display: -webkit-flex 还是不换行
flex-wrap 在 iOS 8.1 及更早版本中基本无效，且 Safari 9–12 对组合属性（如 flex-flow: column wrap）解析异常，整条规则可能被跳过。
- 必须拆解：单独写
-webkit-flex-wrap: wrap;和flex-wrap: wrap;，不能依赖flex-flow -
display: -webkit-flex必须放在display: flex前面，顺序颠倒则前缀声明被忽略 - 若子项设了
position: absolute，align-items: stretch在旧 Safari 中失效，需手动设top: 0; bottom: 0
最易被忽略的是：Safari 对弹性项的收缩保护机制比其他浏览器更激进，min-width: auto 是默认值，它会在内容撑宽时强行阻止 flex-shrink 生效——所以哪怕写了 flex: 1 1 0，也得补一句 min-width: 0 才真正解锁弹性分配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
