Safari Flex布局失效需实机验证并补全-webkit前缀：display必须写为-webkit-flex在前，justify-content/align-items等属性须同步加-webkit-前缀，子项flex:1需配min-width:0或min-height:0，gap需降级为负margin。
当你在Chrome和Firefox中看到完美的Flex布局，却在Safari真机上发现子项堆叠、对齐失效、高度塌陷或间距错乱时，这不是代码写错了，而是Safari特有的Flex解析机制在起作用——它不报错、不警告，只静默降级为block流布局，必须用实机+开发者工具交叉验证才能定位真正断点。
第一步：确认是否真为Safari兼容性问题
打开Safari → Develop → Show Web Inspector → 选中疑似错位的容器元素 → 切到Computed面板，搜索display属性。如果显示值是block、inline或inherit，而非flex或-webkit-flex，说明Flex声明已被完全忽略；再搜justify-content，若该属性呈灰色且标有“invalid”，基本可锁定是前缀缺失或语法断层。
这一步不能靠模拟器：iOS Safari 15.4在桌面模拟器里可能显示正常，但真机上因键盘弹出触发视口重算，flex容器高度会归零——必须用iPhone/iPad真机连接Mac调试。
临时加outline: 2px solid #f00到子项上，观察轮廓是否按预期网格线排列。如果outline紧贴文字边缘而非撑满容器，证明align-items: stretch根本没生效。
第二步：检查display声明是否成对且顺序正确
方法一：手动补全双声明
在CSS中找到Flex容器选择器，确保display属性严格按此顺序书写：
【display: -webkit-flex; display: flex;】
顺序反了（flex在前）会导致旧版Safari（iOS 13.3及更早）直接跳过整条规则；只写display: flex则Safari 9–13.1压根不启动Flex计算引擎。
方法二：用autoprefixer自动补全
检查项目根目录browserslist文件，确认包含"ios_saf >= 9"或"safari >= 9"；运行npx browserslist验证是否命中Safari 12——若只写"last 2 versions"，autoprefixer默认不输出旧版前缀。
第三步：逐项核验容器级属性是否带对应前缀
仅加display前缀远远不够。以下属性在Safari 9–13.1中必须一一配对：
-webkit-flex-direction → flex-direction
-webkit-justify-content → justify-content
-webkit-align-items → align-items
-webkit-flex-wrap → flex-wrap
【注意：flex简写必须用-webkit-flex，不是-webkit-flex-box】
常见错误：写了display: -webkit-flex + justify-content: center → Safari 8–9会丢弃后半句，对齐完全失效。必须同步加-webkit-justify-content: center。
第四步：排查子项级典型失效点
步骤一：检查flex: 1是否导致高度坍缩
在垂直Flex容器中，若子项写flex: 1但高度为0，立即给该子项加min-height: 0；水平布局则加min-width: 0。这是Safari旧内核强制执行min-width: auto保护机制的结果，不加就拒绝拉伸。
步骤二：验证margin: auto是否被忽略
Safari 12–13.1不支持flex item上用margin: auto实现垂直居中。改为align-self: center（需父容器已设align-items: stretch）或拆分为margin-top: auto; margin-bottom: auto。
步骤三：确认图片是否拉伸变形
Flex子项是时，必须同时设置width: 100%; height: auto; object-fit: cover，并确保父容器无固定宽高冲突——否则Safari会按content-box重新解析尺寸，导致比例错乱。
第五步：用真机环境验证gap与flex-basis行为
① gap属性在Safari ≤14.1中等于不存在：DevTools里gap显示为灰色带删除线，getComputedStyle(el).gap返回空字符串。必须降级为负margin方案：容器设margin-left: -8px; overflow: hidden；子项设margin-left: 8px；每个子项还要加min-width: 0和box-sizing: border-box。
② flex-basis写百分比（如flex: 1 1 50%）在Safari 11–12中计算异常，改用flex-basis: 0 + flex-grow: 1组合。
③ 若父容器是position: absolute，必须用top/right/bottom/left四值明确限定尺寸，否则Safari不触发Flex重排计算。
