Safari ≤14.1 中 flex-wrap: wrap 被静默忽略，需显式设 flex-basis: 0px、min-width: 0、box-sizing: border-box，并用双条件 @supports 检测 gap，配合 overflow-wrap 和 word-break 控制文本换行。

flex-wrap: wrap 在 Safari ≤14.1 中被安静忽略

写了 flex-wrap: wrap 但子项死撑一行、内容溢出或裁剪，不是你漏写了属性，而是 Safari ≤14.1 的 WebKit 引擎压根不实现该特性——它不会报错，也不会标灰，就当没看见。尤其在 iOS 8.1–13.1 和 macOS Safari 9–14.1 中，-webkit-flex-wrap: wrap 支持也不稳定，常被跳过。

Safari 对 flex-basis 和 min-width 的优先级处理混乱

旧版 Safari 把 flex: 1 解析成 flex: 1 1 auto，而 flex-basis: auto 会触发隐式 min-width: auto，导致子项拒绝收缩，换行判定失效。即使容器宽度明显不够，它也硬塞单行。

• 必须显式写 flex-basis: 0px（不能用 0%，Safari 会忽略）
• 配套加 min-width: 0 或 min-height: 0，解除内容锁定
• 父容器需有明确 width 或 max-width，否则 Safari 无法计算换行临界点
• 子项含 padding/border 时，必须设 box-sizing: border-box

gap 属性不存在，导致降级逻辑被绕过

gap 在 Safari ≤14.1 中不是“不生效”，是解析器直接跳过该声明。更危险的是 Safari 14.1：它让 @supports (gap: 0) 返回 true，但实际仍忽略 gap，造成你写的降级样式永远不会启用，换行后子项错位甚至塌陷。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 检测必须用双条件：@supports (grid-row-gap: 0) and (row-gap: 0)
• 手动模拟 gap: 16px 需四要素同时满足：overflow: hidden、min-width: 0、box-sizing: border-box、负边距抵消（容器 margin-left: -8px，子项 margin-left: 8px）
• 清除首项间距别用 :not(:first-child)，旧 Safari 不支持，改用 :nth-child(n+2)

文字内容撑宽导致换行失效

即使 flex-wrap: wrap 生效，长 URL、连续中文或无空格英文仍会让子项变宽，挤占换行空间。这不是 Flex 属性问题，而是文本控制缺失。

立即学习“前端免费学习笔记（深入）”；

• 子项内文字容器必须加 min-width: 0（不是父容器）
• 配 overflow-wrap: break-word + word-break: break-all（Safari 14 需两者共存）
• 检查是否继承了 white-space: nowrap——它比所有换行规则都优先
• 移动端注意 viewport 声明要完整，缺 maximum-scale=1.0 可能导致 Safari 误判视口宽度

真正难控的从来不是“要不要换行”，而是 Safari 在不同小版本里对 flex-basis、min-width、white-space 这三者的求值顺序和默认行为各不相同——同一段 CSS，在 iOS 14.5 和 macOS Safari 12 上可能一个换行一个不换，且毫无 warning。