Safari中Flex布局异常的根本原因是旧版本对flex-wrap、gap、align-items等属性的兼容性缺陷及保守布局策略。需显式声明flex-wrap、避免body直接flex、用min-w-0修复媒体元素压缩、以margin降级gap，并在真机验证。
Flex容器在Safari中不换行或子项溢出
根本原因是 Safari（尤其是 iOS 15 及更早）对 flex-wrap: wrap 的解析存在兼容性缺陷：当父容器设了 display: flex 但未显式声明 flex-wrap 时，部分旧版 Safari 会强制按 nowrap 处理，哪怕子项宽度总和已超容器。这不是“没生效”，而是被静默降级为单行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有使用
.d-flex的容器，只要预期子项可能换行，必须叠加.flex-wrap类（Bootstrap 5 内置） - 避免依赖隐式行为，例如不要只写
class="d-flex"就指望.col-6在小屏自动堆叠 - 若需精确控制换行断点，用响应式类：
flex-nowrap flex-sm-wrap flex-md-nowrap
align-items / justify-content 在 Safari 中失效
现象是加了 align-items-center 或 justify-content-between 后完全没反应，DevTools 里属性显示为灰色“invalid”。这通常不是类名写错，而是 Safari 对 Flex 容器的最小尺寸约束更严格——如果父容器没有明确高度或未脱离文档流，它会拒绝应用交叉轴对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有可计算的高度来源：比如加
min-vh-100、h-100，或其父级设了height: 100%并向上追到html, body { height: 100%; } - 不要把
.d-flex直接挂在上——Safari 对body的 flex 行为支持不稳定，改用包裹层<div class="d-flex min-vh-100"> <li>检查是否被 <code>overflow: hidden截断：某些 Safari 版本下，父容器设了overflow: hidden会干扰 flex 对齐的布局测量 - Bootstrap 5 的
gap-*工具类在 Safari 中实际只对.d-grid有效；对.d-flex容器，必须回退到margin手动控制 - 安全写法是混合使用：
class="d-flex flex-wrap gap-2"+ 针对 Safari 加媒体查询降级：@supports not (gap: 1rem) { .d-flex.gap-2 > *:not(:first-child) { margin-left: 0.5rem; } } - 别用
gap替代row-gap/column-gap—— Safari 对这两个独立属性的支持更碎片化，不如统一用gap+ 降级 - 对含媒体内容的列，显式加
min-width: 0（对应 Bootstrap 类min-w-0），打破 Safari 的僵化最小宽度推导 - 避免在
.col内再套.d-flex—— 两层 Flex 嵌套会放大 Safari 的计算误差，改用.row+ 栅格类 - 测试时务必在真实 iOS 设备上验证，模拟器无法复现部分渲染路径差异
gap 属性在 Safari 中被忽略或表现异常
gap 是 Flex 和 Grid 的核心间距工具，但 Safari 14.1–15.6 对 gap 的支持仅限于 Grid，对 Flex 容器中的 gap 会直接丢弃。你写的 gap-3 在这些版本里等于没写。
实操建议：
立即学习“前端免费学习笔记（深入）”；
flex-grow / flex-shrink 计算偏差导致列宽崩塌
在 Safari 中，当多个 .col 嵌套在 .d-flex 容器里，且其中某列含图片或 iframe 时，flex-grow: 1 可能错误地将该列压缩到 0 宽度，尤其在横屏 iPad 上高频出现。这是因为 Safari 对 min-width: auto（Flex 项默认值）与替换元素（如 <img alt="为什么Bootstrap 5的Flex工具类在Safari产生CSS异常" >）的交互处理异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Safari 的 Flex 异常往往不是“不支持”，而是它在特定条件下选择了一条更保守的布局路径。最易被忽略的是：你看到的“失效”，大概率是 Safari 悄悄 fallback 到了 display: block，而不是报错或警告。所以别只看 DevTools 里类名有没有被加上，要点开 computed 样式，确认 display 真的是 flex，且 flex-direction、flex-wrap 等关键属性没被覆盖或重置。
