旧版Safari中Flex布局错位需组合修复：必须同时设置flex-basis: 0px和min-height: 0（垂直）或min-width: 0（水平），图片加height: auto，按钮用min-width: 1px替代0，且所有子项设box-sizing: border-box。
旧版 Safari（iOS 9–15.6 / macOS Safari 9–15.6）中 Flex 布局错位，不是你写错了，而是 WebKit 对 flex-basis、min-height、align-items 和替换元素的解析存在多层偏差。必须组合修复，漏掉任意一项都可能失效。
flex: 1 在 Safari 里高度坍缩怎么办
旧版 Safari 把 flex: 1 解析为 flex: 1 1 auto，而非标准的 flex: 1 1 0，导致子项按内容高度收缩，而不是均分父容器空间。
- 开发者工具里看到
computed flex-basis是auto，而不是0px，就是这个症状 - 所有参与分配的子元素必须同时加：
flex-basis: 0px+min-height: 0（垂直布局）或min-width: 0（水平布局） - 别写
flex-basis: 0%—— Safari 会直接忽略 - 若子元素含
<img>，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算
Bootstrap 栅格在 Safari 中换行错位
flex-wrap: wrap 在 Safari 12–14 中对高度差异大的列计算错误，导致下一行被“顶高”，视觉上列宽压缩或断层。
- 把
flex: 1拆开写：flex-grow: 1、flex-shrink: 1、flex-basis: 0% - 给
.row加align-content: flex-start（注意不是align-items） - 检查是否误将
<form>直接包在<div class="row">内 —— 这会让.col-*不再是.row的直接子元素，Flex 上下文彻底断裂 - 正确结构必须是：
<div class="row"><div class="col-md-4"><form>...</form></div></div>
Safari 里图片和按钮在 Flex 中宽度/高度异常
<img> 被 align-items: stretch 强制拉伸；<button> 被隐式设 min-width: min-content 且不响应 min-width: 0。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
-
<img>必须加：width: 100%、height: auto、object-fit: cover，且其**直接父容器**要有确定高度（如height: 200px或flex-basis: 200px） -
<button>不能只靠flex: 1，要配flex: 1 0 0+min-width: 1px（min-width: 0在 iOS Safari 中常被忽略） - 所有 Flex 子项必须设
box-sizing: border-box，否则 padding/border 会撑出预期外宽度 - 避免
white-space: nowrap—— 它会让长文本按钮强行撑开，破坏等宽分配起点
align-items: center 在 Safari 中偏移 1–2px
这不是居中失效，而是 Safari 在 flex-direction: row 下对内联元素基线对齐更敏感，尤其当子元素含文本、<img> 或 <button> 时。
- 确保
align-items: center写在**直接父容器**上，且该容器有明确height或min-height - 子元素如果是纯文本或
<span>，优先转为display: block或display: flex，彻底脱离内联流 - 若需兼容 SVG 图标，必须加
display: block，否则vertical-align: baseline会干扰居中 - 慎用
align-self：部分 WebView（如 Android 4.4）中它会覆盖align-items，优先统一控制父级
这些补丁不是可选优化，而是 Safari 特定版本的渲染契约 —— flex-basis: 0px 和 min-height: 0 必须成对出现，display: -webkit-flex 在 iOS 13.3 及更早版本中不可省略，min-width: 1px 是按钮等宽唯一稳定解法。任何环节缺失，错位就会复现。
