iOS 14.1及更早Safari对Flex布局存在语法级断层：display:flex被忽略、gap不解析、flex:1错误解析致高度坍塌；须同时声明display:-webkit-flex（在前）和display:flex，所有Flex属性加-webkit-前缀，gap需用负margin+padding模拟，flex:1须拆解为flex-grow:1;flex-shrink:1;flex-basis:0;并设min-height:0。
iOS 14.1 及更早版本的 Safari 对 Flex 布局不是“部分不支持”，而是存在多个语法级断层：display: flex 被完全忽略、gap 不解析、flex: 1 错误解析为 flex-basis: auto 导致高度坍塌。只加 autoprefixer 或仅写标准属性，页面在 iOS 13.3 或 Safari 12 上大概率直接错位甚至空白。
display: -webkit-flex 必须成对出现且顺序不能错
旧版 Safari（iOS 9–13.3 / Safari 9–13.1）根本不识别 display: flex，必须显式声明 display: -webkit-flex，且它必须写在 display: flex 前面；否则整条规则被跳过。
-
display: -webkit-flex和display: flex必须同时存在，前者在前 -
flex-direction、justify-content、align-items、flex-wrap都要同步加前缀：-webkit-flex-direction、-webkit-justify-content等 - 不要混用：比如
display: -webkit-flex+justify-content: space-between→ Safari 8–9 会丢弃后半句，对齐失效 - iOS 8 只认
display: -webkit-box，所以最小兼容集合里还得保留它
gap 属性在 Safari ≤14.1 中等于没写
gap、row-gap、column-gap 在 Safari ≤14.1 中压根不解析——DevTools 里显示为灰色带删除线，getComputedStyle(el).gap 返回空字符串。这不是 bug，是规范未实现。
- 降级方案只能用负 margin + 正 padding 模拟：
margin: -8px（容器）、padding: 8px（子项） - 子项必须加
min-width: 0和box-sizing: border-box，否则内容撑宽时溢出或换行错乱 - 换行后首项多出左侧/顶部 padding？用
:nth-child(n+2)清除（:not(:first-child)在旧 Safari 不支持） -
@supports (gap: 0)不可靠：Safari 14.1 会误判为支持，但实际跳过该声明
flex: 1 在垂直布局中坍缩为 0 的真实原因
旧版 Safari 把 flex: 1 错误解析为 flex: 1 1 auto，而 flex-basis: auto 触发默认 min-height: auto，导致弹性项拒绝拉伸、高度归零。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
flex-basis: 0，并配套min-height: 0（垂直布局）或min-width: 0（水平布局） - 推荐拆解写法：
flex-grow: 1; flex-shrink: 1; flex-basis: 0;，比单写flex: 1更可控 - 若子项含图片，额外加
width: 100%; height: auto;+object-fit: cover;防止拉伸变形 - 避免在
<button></button>上直接设display: flex：旧 Safari 和 X5 内核会忽略align-items，改用内层<div> 包裹 <h3>autoprefixer 配置必须手动指定旧版目标</h3> <p>默认配置如 <code>"last 2 versions"完全不会输出 Safari 12 或 iOS 10 的前缀——因为当前最新是 Safari 18，它不会回溯。- 正确写法示例：
"ios_saf >= 9", "safari >= 9"或明确写"ios - loader 顺序必须是：
less-loader→postcss-loader→css-loader，否则@import或变量可能被跳过 - WXSS 文件（
.wxss）不走 webpack 构建，该方案只适用于通过<style></style>标签注入或构建产物中的 CSS - 手写前缀极易遗漏，尤其涉及
flex-grow、align-self等进阶属性时，自动处理更可靠
真正容易被忽略的是
min-width: 0和min-height: 0—— 它们不是“可选优化”，而是旧版 Safari 中子项能正常收缩、拉伸、防溢出的硬性前提。漏掉任何一个，都可能导致布局在 iOS 12 或微信 X5 内核中突然塌陷或错位。 - 正确写法示例：
