Bootstrap 4 Flex在Safari 10–14等旧浏览器中错位，是因WebKit引擎对flex-wrap、align-items等实现缺陷；需拆解flex:1、显式设flex-basis:0%、确保.col为.row直接子元素、避免position:absolute干扰高度计算。
Bootstrap 4 的 Flex 布局在 Safari 10–14、IE11 或部分 Android WebView 中出现错位、不换行、等高失效等问题，不是你写错了类名，而是旧版浏览器对 Flexbox 规范的实现存在已知缺陷——这些 Bug 已被确认，且无法靠加前缀或重写 CSS 全面绕过。
flex-wrap: wrap 在 Safari 10–14 中不换行
现象：明明写了 flex-wrap: wrap，子项却死撑一行，内容溢出或被裁剪；align-items: stretch 对高度无效，列看起来“塌陷”。
- 根本原因是 Safari 10–14 的 WebKit 引擎错误解析
flex-basis和min-width的交互逻辑，尤其当子项含文本或图片时 - 别依赖
min-width: 0控制换行——它在 Safari 13.1 前常被忽略；改用flex-basis: 0+flex-grow: 1 - 对容器显式声明
align-content: flex-start，可修复 Safari 10.x 的换行断裂问题 -
flex: 1简写在 Safari 13.1 有解析 bug，必须拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0%
.row 直接子元素被破坏导致 Flex 失效
现象：加了 d-flex 或 row，但 .col-* 还是竖着堆叠，DevTools 里看到 flex-basis 是 auto 而非计算值。
- 最常见原因：
.col-*不是.row的直接子元素，中间插了<form>、<section>或嵌套<div> - 错误结构：
<div class="row"><form><div class="col-6">...</div></form></div>→.col-6是<form>的子元素，.row完全感知不到它 - 检查 computed 样式：确认
.row的display确实是flex，且.col-*的flex-basis显示为百分比（如50%）而非auto - 嵌套时漏加
mx-n2会导致 padding/margin 抵消失败，视觉上列间距异常，本质仍是父子链断裂
flex-grow-1 在 Bootstrap 4 中宽度分配异常
现象：一个固定宽元素 + 一个 flex-grow-1 元素，并排后后者没占满剩余空间，甚至宽度为 0。
- 这是 Safari 和 IE11 对
flex-grow初始尺寸计算的差异：它们默认按flex-basis: auto计算，而auto在无明确宽时可能取内容宽度，导致增长空间被低估 - 解决方法：给
flex-grow-1元素加内联样式style="width: 0"，强制其基础宽度为 0，让flex-grow有空间可分 - 不要混用
.col-6和flex-grow-1—— 前者自带flex: 0 0 50%，后者是flex: 1 1 0%，规则冲突 - 在 IE11 中，还需确保父容器有
display: -ms-flexbox（Bootstrap 4 的d-flex已内置，但若被重置 CSS 覆盖则需手动补）
等高列（align-items: stretch）在 Safari 中失效
现象：加了 d-flex 和 align-items: stretch，但列高度不一致，短内容列明显矮于长内容列。
- 不是属性没生效，而是某些内部元素干扰了高度计算：比如
position: absolute子项完全脱离文档流，所在列失去“可拉伸基准” - 图片未设
max-width: 100%或height: auto，会单侧撑高但不触发 stretch 逻辑 - 显式设置了
height、min-height或flex-shrink: 0在列上，会覆盖align-items: stretch -
.row上设overflow: hidden会裁掉 stretch 后超出的部分，造成“看起来不等高” - 文字溢出或长 URL 撑破列宽时，
word-break: break-word必须加在文本容器（如<p>）上，不能只加在.col-*
真正麻烦的不是“怎么让它工作”，而是旧浏览器对同一段 Flex 声明的解析路径完全不同——Safari 13.1 和 IE11 的 flex-basis 行为几乎相反，所以任何“一刀切”的 hack 都可能在某个版本里翻车。优先用结构规避（比如避免绝对定位嵌套、保证直接子元素关系），其次才用针对性 CSS 修补。
