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，导致子项拒绝收缩，换行判定失效。即使容器宽度明显不够，它也硬塞单行。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须显式写
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，造成你写的降级样式永远不会启用，换行后子项错位甚至塌陷。
- 检测必须用双条件：
@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 误判视口宽度
flex-basis、min-width、white-space 这三者的求值顺序和默认行为各不相同——同一段 CSS，在 iOS 14.5 和 macOS Safari 12 上可能一个换行一个不换，且毫无 warning。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
