Flex 浏览器兼容性

总体结论（2024–2026 实务）

对现代浏览器（Chrome / Edge / Firefox / Safari 近几个大版本，以及主流移动浏览器）：

• 标准 Flexbox（display: flex 及核心属性）已可放心使用
• 无需再写 2009 旧版语法或全面 -webkit-box
• 仍需关注少数细节：gap 在旧 Safari、部分 IE 历史包袱、以及老旧 WebView

若产品仍声明支持 IE10/IE11 或极老 Android WebView，需要额外策略（见下文）。

---

支持概况

特性	Chrome	Firefox	Safari	Edge（Chromium）	IE11
display: flex	完整	完整	完整	完整	部分（有 bug）
inline-flex	完整	完整	完整	完整	部分
flex 简写	完整	完整	完整	完整	基本可用
flex-wrap	完整	完整	完整	完整	有历史问题
justify/align	完整	完整	完整	完整	部分值/bug
gap（flex）	完整	完整	14.1+	完整	不支持
space-evenly	完整	完整	完整	完整	不支持

上表为工程实践向摘要；精确版本矩阵以 Can I Use / MDN 为准。

---

历史语法（了解即可）

Flex 曾经历多版语法，旧文可能仍出现：

/* 2009 旧语法（勿用于新项目） */
display: -webkit-box;
-webkit-box-orient: horizontal;

/* 2012 过渡 */
display: -webkit-flex;
-webkit-flex: 1;

/* 标准 */
display: flex;
flex: 1;

新项目：只写标准属性。仅当必须兼容极老 WebKit 时，再用 Autoprefixer 生成前缀。

---

IE10 / IE11 注意点（遗留项目）

若仍需支持 IE11：

1. 使用标准写法 + Autoprefixer，不要手写混搭旧语法
2. 避免依赖 gap：用 margin 或额外 spacer
3. 注意 min-height + flex 垂直居中、flex-basis 百分比、图片作为 flex 项等已知 bug
4. display: flex 的子元素若是 inline 级，IE 行为可能异常，可显式设块级
5. 复杂嵌套 Flex 在 IE 上更易出问题，布局尽量简化

/* IE 友好的间距替代 gap */
.container > * + * {
  margin-left: 16px;
}
/* 换行场景则更适合用 margin 四向或包装器 */

多数新产品已可 放弃 IE，把精力放在现代引擎。

---

gap 在 Flex 中的兼容

• 现代 Chromium / Firefox：支持良好
• Safari：从 14.1（iOS 14.5+）起支持 flex gap
• 若需支持更老 iOS：

.container {
  display: flex;
  gap: 16px;
}
@supports not (gap: 16px) {
  .container > * + * {
    margin-left: 16px;
  }
}

或统一用 margin，并接受首尾边距需额外处理。

---

推荐兼容策略

1. 构建链

• 使用 Autoprefixer + 合理 browserslist
• 不要手动堆叠大量过时前缀

2. browserslist 示例

> 0.5%
last 2 versions
not dead
not IE 11

3. 特性检测

@supports (display: flex) {
  .layout { display: flex; }
}

4. 渐进增强

• 核心阅读流：正常文档流可先可读
• Flex 用于增强对齐与分配
• 关键布局可对老环境降级为单列

---

移动端与 WebView

• iOS Safari / Chrome for Android：现代版本 Flex 可靠
• 国内老旧 WebView、特殊机型内置浏览器：用真机抽测嵌套 flex、min-width: 0、输入框与 overflow
• 小程序 / Hybrid：以对应基础库文档为准，一般支持标准 Flex

---

测试清单

• 主轴 row / column 切换
• wrap 在窄屏是否按预期折行
• 长文本、表格、<pre> 是否撑破（min-width: 0）
• 图片 / SVG 作为 flex 项的缩放
• gap 在目标最低 Safari/iOS 版本
• 动态显示/隐藏子项后的对齐
• 键盘焦点顺序是否仍合理（避免滥用 order）

---

实务建议

1. 默认按现代标准写 Flex，不要为不存在的 IE 需求过度降级
2. 团队约定最低浏览器版本，并写进 README / browserslist
3. gap、space-evenly 等按最低版本决定用或不用 fallback
4. 出问题先查是否 min-width: auto、嵌套滚动、图片默认 min-size，而非怀疑「Flex 不兼容」