旧版safari（≤14.1）不识别display: flex和gap等现代flexbox语法，必须用display: -webkit-flex及双条件@supports (grid-row-gap: 0) and (row-gap: 0)检测降级，并配合overflow: hidden、min-width: 0、box-sizing: border-box和:nth-child(n+2)等防护措施。
旧版Safari（≤14.1）对Flexbox的支持存在多个断层式缺陷，不是简单加前缀就能修复，而是底层解析机制不识别现代语法——写了display: flex但子项堆成一列、justify-content标为invalid、gap完全无视觉效果，大概率就是这些原因在起作用。
核心失效原因：浏览器根本不“看见”标准属性
从Safari 9到13.1，引擎只认旧版Flexbox草案，【display: flex会被直接忽略，必须写display: -webkit-flex才能触发Flex计算引擎】。这不是兼容性补丁问题，是语法层面的不匹配——就像给柴油机加汽油，加了也点不着火。
写了display: flex但没加-webkit版本，整个容器就退化成普通块级元素，后续所有flex-direction、justify-content都会变灰色或标为invalid。
autoprefixer默认不会为此生成前缀，除非browserslist明确包含safari >= 9或ios_saf >= 9；配成"last 2 versions"会直接跳过Safari 12，导致iOS 13.3设备上布局彻底崩塌。
gap属性被完全跳过，不是“失效”而是“不存在”
Safari ≤14.1压根不解析gap属性，DevTools里显示为灰色带删除线，getComputedStyle(el).gap返回空字符串或"normal"。
@supports (gap: 0)检测不可靠——Safari 14.1会误判为true，但实际在flex容器中仍忽略gap，造成降级逻辑被绕过，换行时子项错位甚至塌陷。
必须用双条件检测：【@supports (grid-row-gap: 0) and (row-gap: 0)】，否则兜底方案永远不会生效。
仅靠margin-right: 12px模拟gap，在flex-wrap启用时会导致换行后首行末项与次行首项间距过大，此时需改用overflow: hidden + 负margin容器 + 正margin子项，并强制子项min-width: 0和box-sizing: border-box。
flex简写属性在iOS 8.4及更早版本中被彻底忽略
iOS 8.4及更早版本WebKit内核未实现CSS Flexible Box Layout Module Level 1完整语法，flex: 1、flex: 0 0 auto这类简写会被完全跳过，布局退化为块级堆叠。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
必须拆解为-webkit-flex-grow、-webkit-flex-shrink、-webkit-flex-basis三属性分别声明，autoprefixer无法自动完成此映射，因为规范未定义这种转换关系。
如果项目需兼容iOS 8，display: -webkit-flex是硬性前提，且所有容器级属性如-webkit-justify-content、-webkit-align-items都必须成对出现，顺序不能颠倒。
IE10–IE11需两套语法并存，缺一不可
IE10–IE11支持的是2012年草案，关键词完全不同：justify-content对应-ms-flex-pack，align-items对应-ms-flex-align，flex-direction对应-ms-flex-direction。
只写display: -ms-flexbox不行，必须同时声明display: -ms-flexbox和display: flex；只写-ms-flex-pack: center也不行，必须配套justify-content: center，否则IE11可能部分生效、部分失效。
IE9及以下连-ms-flexbox都不支持，此时兜底样式必须写在Flex样式之前，否则IE9会忽略整个Flex规则块但保留前面的float，造成布局叠加错乱。
关键防护措施必须同步启用
第一步：Flex容器加overflow: hidden——否则负margin会触发意外水平滚动条或截断右侧子项。
第二步：每个子项加min-width: 0——默认min-width: auto在内容撑宽时会破坏flex-shrink行为，导致换行异常或溢出。
第三步：每个子项加box-sizing: border-box——避免padding+border叠加导致尺寸失控，这是旧版Safari中布局塌陷的高频诱因。
第四步：禁用:not(:first-child)选择器——低版本Safari和Android WebView不支持，改用:nth-child(n+2)才可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
