仅 safari 9–13.1（ios 9–13.3）必须写 display: -webkit-flex 并配齐所有前缀属性，否则 flex 布局完全不启动；safari 14+ 已彻底忽略前缀，写了也无效。

旧版 Safari（iOS 13.3 / Safari 13.1 及更早）不识别 display: flex，必须写 display: -webkit-flex 并配齐所有前缀属性，否则 Flex 布局完全不启动；现代 Safari（14+）已彻底忽略这些前缀，写了也白写。

哪些 Safari 版本必须写 display: -webkit-flex

仅 Safari 9–13.1（对应 iOS 9–13.3）需要。这不是“兼容增强”，是硬性门槛：没这个声明，Flex 计算引擎根本不运行，justify-content、flex-direction 全部标为 invalid，子项堆成一列或高度塌陷。

• display: -webkit-flex 必须写在 display: flex 前面，顺序反了整条规则被跳过
• 只加 display 前缀没用，flex-direction、justify-content、align-items、flex-wrap、flex（不是 -webkit-flex-box）都得一一补全
• Safari 14+ 已移除对 -webkit-flex 的支持，开发者工具里根本看不到该声明，也不报错

flex: 1 在 Safari 中撑不满、图片拉伸变形怎么办

这和前缀无关，是 Safari 对弹性项默认行为解析更严格导致的。常见于父容器无明确宽高、或子项触发了 min-width: auto（默认值）保护机制。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 显式加 min-width: 0 或 max-width: 100%，防止内容宽度干扰弹性分配
• 避免只写 flex: 1，改用 flex: 1 1 0 或拆解为 flex-grow: 1; flex-shrink: 1; flex-basis: 0
• 若子项是图片，加 width: 100%; height: auto 防止拉伸，再配合 object-fit: cover 控制裁剪

为什么 button 上直接写 display: flex 总是失效

<button></button> 在 Safari 9–13.1 和多数 Android WebView 中是“受限弹性容器”——即使加了前缀，align-items 和 justify-content 也会被忽略，导致图标文字垂直错位、text-align: center 失效。

• 不要在 button 上直接设 display: flex，改用内层 <span></span> 或 <div> 包裹内容并设 Flex <li>给 <code>button 清掉默认 padding 和 border，否则内层 Flex 容器会被挤压
• 必须显式写 box-sizing: border-box + min-width: 0，否则 Safari（尤其 iOS 15+）会按不同规则计算宽度，偏差可达 12px

autoprefixer 能不能自动补全这些前缀

能，但默认配置（如 "last 2 versions"）完全不会触发 Safari 旧版前缀输出，因为当前最新是 Safari 18，它不会回溯到 Safari 12。

• 正确配置示例：ios_saf >= 11.3 或 safari >= 10（注意小数点，ios_saf >= 11 会漏掉 iOS 11.0）
• 错误配置：>= 12.1 是语法错误，autoprefixer 直接跳过
• 生成后务必检查 CSS 文件中是否真有 -webkit-flex 等声明，别依赖“应该有”

最易被忽略的一点：Safari 旧版对 flex-basis 解析极不稳定，flex: 0 0 auto 在 iOS 11–12 中大概率失效，应优先用 flex: 0 0 fit-content 或直接改用 width + flex-shrink 组合。