Bootstrap 4 在 Safari ≤14.1 中 Flexbox 渲染异常源于旧版 WebKit 对 flex: 1 等语法静默解析失败，需拆解为 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; gap 须用合写形式；align-items: stretch 失效需确保父容器有可测高度且子项未脱离文档流；display: -webkit-flex 必须与 display: flex 成对使用且前缀在前。
Bootstrap 4 在 Safari（尤其是 ≤14.1）中 Flexbox 渲染异常，不是 Bootstrap 写错了，而是旧版 WebKit 对 Flex 语法存在静默解析失败、属性被跳过、计算逻辑错误等硬伤。加 -webkit- 前缀不能“修好”，反而可能触发兼容逻辑冲突。
flex: 1 在 Safari 中垂直塌陷怎么办
Safari ≤14.1 把 flex: 1 错误解析为 flex: 1 1 0%（而非标准的 1 1 auto），导致子项在垂直方向无法拉伸，卡片/容器高度归零。
- 改用显式拆解：
flex-grow: 1; flex-shrink: 1; flex-basis: 0%;—— Safari 13–14 能稳定识别这组单属性 - 避免在 .row 或 .col 上设
min-height或height，它们会覆盖align-items: stretch - 若用于卡片布局，确保卡片本身没设
position: absolute或flex-shrink: 0，否则拉伸失效
gap 不生效，子项紧贴错位
Safari ≤15.3 不支持 row-gap 和 column-gap 单独声明，只认合写的 gap，且对父容器 overflow: hidden 敏感。
- 把
row-gap: 12px; column-gap: 16px;全部替换为gap: 12px 16px; - 检查父容器是否带
overflow: hidden—— Safari 下它会导致 gap 推挤后子项被裁剪，看起来像 gap 消失 - 别用
@supports (gap: 0)做降级判断，Safari 15.4–16.3 存在路径 bug，尤其配合grid-auto-flow: column时不可靠
align-items: stretch 失效，列高度不一致
这不是 CSS 写错了，是 Safari 对 stretch 的触发条件更苛刻：父容器必须有可测量高度，且子项不能脱离文档流或被强制约束尺寸。
- 确认 .row 是直接父级，不要嵌套在额外
div里（例如<div class="row"><div class="col"><div class="row">…</div></div></div>） - 移除列上显式的
height、min-height、max-height或flex-shrink: 0 - 图片必须设
max-width: 100%; height: auto;，否则单侧撑高但不触发 stretch - 如果用了
.card，别给它设position: absolute—— 它完全不参与高度计算，所在列必然塌陷
display: -webkit-flex 为什么有时还是不生效
Safari ≤9（iOS 9 及更早）处于 Flexbox 语法断层期，仅部分识别前缀，且对组合属性（如 flex-flow）解析异常，整条规则可能被跳过。
- 必须成对写：
display: -webkit-flex; display: flex;，且 -webkit 版本必须在前 -
flex-direction、justify-content等必须单独加前缀：-webkit-flex-direction: column;、-webkit-justify-content: center; - 禁用
flex: 1简写，也禁用flex-flow: column wrap这类组合值，拆成单属性最稳 - 如果项目需兼容 iOS 9，建议放弃 Flexbox 主布局，改用 float + clearfix 或 Bootstrap 4 自带的
float-left/float-right工具类
真正要盯住的是 Safari 的“静默丢弃”行为：它不报错、不警告，只是跳过整条声明。验证是否生效，别只看开发者工具样式面板，得去 Computed 面板查 display 值是不是 flex，再手动加 outline: 1px solid red 看子项是否按弹性规则对齐——这才是 Safari 下调试 Flex 的真实起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
