Safari旧版（≤14.1）不识别display: flex，必须声明display: -webkit-flex（在前）和display: flex（在后），并为justify-content、align-items等加-webkit-前缀；flex简写需拆解，gap须用双条件@supports检测并降级。
Chrome 和 Safari 对 Flex 布局的解析逻辑根本不同——不是“渲染略有差异”，而是 Safari 旧版（≤14.1）压根不识别 display: flex，而 Chrome 从很早就完全支持标准语法；你写的代码在 Chrome 里能跑，在 Safari 里错位或堆叠，大概率是 Safari 直接跳过了整条 Flex 声明。
display: -webkit-flex 不是可选项，是 Safari ≤14.1 的启动开关
Safari 9–14.1 实现的是旧版 Flexbox 草案，display: flex 对它来说等于不存在。只写标准写法，整个容器就退化成普通 div，后续所有 justify-content、align-items 都会标为 invalid 或直接忽略。
- 必须成对声明：
display: -webkit-flex写在前面，display: flex写在后面 - 所有配套属性都要补前缀：
-webkit-flex-direction、-webkit-justify-content、-webkit-align-items、-webkit-flex-wrap -
flex简写在 iOS 8.4 及更早版本中完全无效，必须拆解为-webkit-flex-grow、-webkit-flex-shrink、-webkit-flex-basis - autoprefixer 默认不加 Safari 前缀，需在
browserslist明确写safari >= 9或ios_saf >= 9，配"last 2 versions"会漏掉 Safari 12
gap 在 Safari ≤14.1 中根本不会被解析
gap 属性在 Safari ≤14.1 中不是“失效”，而是 DevTools 里显示为灰色带删除线，getComputedStyle(el).gap 返回空字符串或 "normal"。用 @supports (gap: 0) 检测不可靠——Safari 14.1 会误判为 true，但实际不生效。
- 必须用双条件检测：
@supports (grid-row-gap: 0) and (row-gap: 0) - 降级方案别只靠
margin-right：flex-wrap 启用后首行末项和次行首项间距会异常放大 - 稳妥做法：容器设
overflow: hidden+ 负margin，子项设正margin+min-width: 0+box-sizing: border-box
align-items: stretch 导致 Safari 中图片拉伸变形
Safari 对 align-items: stretch 的实现更严格——它真会强制把 <img> 拉到容器高度，不管宽高比。这不是 bug，是它认真执行了规范定义。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
object-fit单独写基本无效，必须配合：width: 100%+height: 100%（或height: auto） - 图片父容器必须有明确高度（如
height: 200px、flex-basis: 200px，或用aspect-ratio锚定） - 关键修复项：
flex-basis: 0px（不能用0%）、min-height: 0（min-height: auto会被 Safari 激进处理） - 多层嵌套时，
object-fit和尺寸声明要移到<img>的**直接父容器**上，并加display: block
flex: 1 在 button 上宽窄不一，根源在 min-width
Chrome/Firefox 默认给 <button></button> 加了 min-width: min-content，flex: 1（即 flex: 1 1 0）允许压缩，但文字短的按钮被压扁、文字长的又被撑开，结果就是同一行按钮宽度参差不齐。
- 必须写死收缩行为：
flex: 1 0 0（flex-shrink: 0） -
min-width: 0是硬性前提；iOS Safari 下若仍不稳，改用min-width: 1px - 所有参与分配的
<button></button>都要显式加box-sizing: border-box，否则 padding 计算偏差可达 10px+ - 避免
white-space: nowrap和flex: 1共存，这会让 Safari 更难判断内容边界
真正麻烦的不是写法本身，而是 Safari 旧版对 CSS 的“静默丢弃”：不报错、不警告、不渲染，只默默回退到流式布局。验证必须落到 DevTools 的 Computed 样式和真机 outline 上，而不是靠桌面模拟器或“看起来差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
