<p>IE10/IE11 和 Safari 6.1–8.0 对 flex-direction 支持异常：IE10 仅识别 -ms-flex-direction，IE11 存在 column + align-items: center 溢出 bug；Safari 需 -webkit- 前缀；IE10 的 row-reverse/column-reverse 行为错乱；iOS Safari 9+ 虽标准支持，但嵌套过深或 inline-flex 可能引发主轴异常。</p>
有，主要集中在 IE10/IE11 和旧版 Safari 上，且表现不一致——不是“不支持”，而是“支持但行为异常”或“需私有前缀才能生效”。
IE10/IE11 必须加 -ms-flex-direction 前缀
IE10 完全不识别 flex-direction 标准属性，只认 -ms-flex-direction；IE11 虽支持标准写法，但某些组合（如 column + align-items: center）仍会触发子项溢出 bug。实际项目中建议统一补全：
display: -ms-flexbox; -ms-flex-direction: column; flex-direction: column;
注意：-ms-flexbox 是 IE10 的 display 值，不能和 display: flex 混用；IE11 可同时写两者，但 -ms- 属性仍要保留以兜底。
Safari 6.1–8.0 需要 -webkit-flex-direction
Safari 在 6.1 到 8.0 版本中仅支持带 -webkit- 前缀的弹性盒属性。比如：
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
不加前缀时，这些老 Safari 会直接忽略布局方向设置，退化为普通块级流；而 display: -webkit-flex 必须成对出现——如果只写它却不写 display: flex，现代浏览器又会失效。
IE10 下 row-reverse 和 column-reverse 行为错乱
IE10 对反向轴的支持极差：row-reverse 会导致子项顺序错乱、column-reverse 可能完全不翻转。更麻烦的是，它不报错也不警告，只是渲染异常。遇到必须用反向排列的场景，建议：
- 降级为 JS 控制 DOM 顺序（
Array.prototype.reverse()+appendChild()） - 改用
order属性手动排序（IE10 支持-ms-flex-order） - 避免在 IE10 环境下使用
reverse类值，改用row/column+justify-content模拟对齐效果
移动端 iOS Safari 9.0+ 基本无坑，但要注意 flex 容器嵌套深度
iOS Safari 9 开始已全面支持标准 flex-direction，无需前缀。但实测发现：当嵌套超过 3 层 flex 容器（比如 flex → flex → flex → item），部分 iOS 12–14 设备会出现主轴方向继承异常，尤其在动态插入元素后。解决方法很简单：
- 每层 flex 容器显式声明
flex-direction，不依赖继承 - 避免用
display: inline-flex嵌套在display: flex内部（iOS Safari 对 inline-flex 的主轴计算有缓存偏差） - 若用 React/Vue 动态切换方向，记得强制重排：在修改
flex-direction后读取一次offsetHeight触发重绘
真正容易被忽略的点是：很多团队只测试了 flex-direction: row 和 column，却没覆盖 row-reverse 在 IE10 下的 DOM 顺序错位——它不会崩溃，但用户看到的内容顺序是反的，而且很难通过 DevTools 直接定位。
