Safari ≤13.1 不识别 display: flex，必须用 display: -webkit-flex 且前置；flex: 1 会导致子项高度坍缩为 0，需写三值并加 min-height: 0；gap 未实现，须用负 margin 模拟并配 overflow: hidden 和 box-sizing: border-box。
不是“不生效”，是 Safari ≤13.1 根本不认识 display: flex —— 写了等于没写，必须用 display: -webkit-flex 触发底层 Flex 引擎，否则整个容器退化为普通块级元素。
为什么 display: flex 在 Safari 9–13.1 中完全被忽略
Safari 9–13.1 实现的是 2012 年旧草案，只识别带 -webkit- 前缀的语法。DevTools 里 justify-content、flex-direction 全部标灰或显示 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 默认不会输出这些前缀，除非
browserslist明确包含ios_saf >= 9或safari >= 9；配"last 2 versions"会漏掉 Safari 12
为什么 flex: 1 在 Safari 9–12 中子项高度坍缩为 0
旧 WebKit 把 flex: 1 错误解析为 flex: 1 1 auto，而 flex-basis: auto 在父容器高度未锚定时，直接算出 0 —— 不是缩放 Bug，是初始尺寸推断逻辑不同。
- 显式写三值：
flex: 1 1 0px+-webkit-flex: 1 1 0px（不能写0%，Safari 会忽略） - 必须配套加
min-height: 0（垂直布局）或min-width: 0（水平布局），否则默认min-height: auto会阻断拉伸 - 父容器要有确定高度：比如
height: 100vh、min-height: 100dvh，或绝对定位下用top: 0; bottom: 0 - 若子项含
<img>，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算
为什么 gap 在 Safari ≤14.1 中毫无反应
gap 不是“不兼容”，是压根未实现 —— 解析器静默跳过该声明。@supports (gap: 0) 在 Safari 14.1 下会误判为 true，但实际仍忽略，导致降级逻辑失效、换行后子项错位甚至塌陷。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 检测必须用双条件：
@supports (grid-row-gap: 0) and (row-gap: 0)，单条件不可靠 - 模拟
gap: 16px需四要素同时满足：overflow: hidden（防滚动）、min-width: 0（防内容撑宽溢出）、box-sizing: border-box（防 padding/border 失控）、间隙均分（容器margin-left: -8px; margin-right: -8px，子项margin-left: 8px; margin-right: 8px） - 清除首项 margin 不能用
:not(:first-child)（旧 Safari 和 Android WebView 不支持），改用:nth-child(n+2) -
flex-wrap在 iOS 8.1 以下基本无效，-webkit-flex-wrap: wrap多数情况被安静忽略，不报错也不生效
为什么 <button> 上的 Flex 布局总是错位
<button> 在 Safari 9–13.1 和多数 Android WebView 中是“受限弹性容器”——即使加了前缀，align-items 和 justify-content 也会被忽略，导致图标文字垂直错位、text-align: center 失效。
- 不要在
<button>上直接设display: flex，改用内层<div>包裹内容并设 Flex - 必须显式写
box-sizing: border-box+min-width: 0，否则 Safari（尤其 iOS 15+）会按不同规则计算宽度，偏差可达 12px - iOS Safari 对
<button>强制施加隐式min-width: min-content，且悄悄忽略你写的min-width: 0；稳定解法是用flex: 1 0 0搭配min-width: 0 - 避免
white-space: nowrap，它会让长文本强行撑开，加剧宽度不一致
最易被忽略的点是：所有涉及子项收缩/拉伸的场景，min-height: 0 或 min-width: 0 不是可选项，而是硬性前提；而 gap 的降级方案一旦漏掉 overflow: hidden 或 box-sizing: border-box，负 margin 就会触发意外水平滚动条。
