如何为旧版浏览器添加CSS Flex兼容前缀？-css教程-PHP中文网

chrome 21–28 必须用 display: -webkit-flex 且所有 flex 属性加 -webkit- 前缀；android 4.3 及更早需降级为 display: -webkit-box；ie10–11 用 display: -ms-flexbox；autoprefixer 不自动降级 flex 语法，仅补前缀。

如何为旧版浏览器添加css flex兼容前缀？

Chrome 21–28 必须写 `display: -webkit-flex`，否则整个 Flex 失效

这些版本的 Chrome 完全忽略 display: flex，不是“不完美”，而是根本不会启用弹性布局。只加前缀还不够——flex-direction、justify-content、align-items 全部要配 -webkit- 前缀，且行为有差异：

-webkit-flex-wrap: wrap 在 Chrome 27 下可能不换行，需配合 -webkit-flex: 1 显式声明子项可缩放
-webkit-justify-content: space-between 在 Chrome 25 中偶现偏移，建议加 margin: 0 清除子项默认外边距
-webkit-align-items: center 对 inline 元素无效，子项得先设 display: block
flex 简写必须拆开：-webkit-flex-grow、-webkit-flex-shrink、-webkit-flex-basis；-webkit-flex: 1 在 Chrome 26 解析不稳定

Android 4.3 及更早必须用 `display: -webkit-box`，`-webkit-flex` 没用

旧安卓 WebView（尤其 4.0–4.3）内核太老，连 display: -webkit-flex 都不识别，只认最原始草案语法 display: -webkit-box。这不是加前缀的问题，是整套属性名和逻辑都不同：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

顺序必须严格：display: -webkit-box 在前，display: flex 在后；颠倒就白屏
-webkit-box-orient: horizontal 对应 flex-direction: row（不能依赖默认值）
-webkit-box-pack: center 对应 justify-content: center，-webkit-box-align: center 对应 align-items: center
子项用 -webkit-box-flex: 1，不是 flex: 1；这个值是权重份数，不是比例
flex-wrap 完全不支持，-webkit-box-lines 属性不存在，换行得靠媒体查询切 display: block 或 JS 动态拆 DOM

IE10–11 要用 `display: -ms-flexbox`，且 `flex-wrap` 无效

IE10/11 实现的是 2012 年草案，flex-wrap: wrap 直接被忽略，align-content 无对应属性。必须成对写两套声明，且顺序和映射不能错：

display: -ms-flexbox 必须放在 display: flex 前面，否则 IE 不触发旧模式
-ms-flex-pack: center 对应 justify-content: center，-ms-flex-align: center 对应 align-items: center
flex-direction: column → -ms-flex-direction: column；flex: 1 在 IE10 解析为 flex: 0 0 auto，得手动写 -ms-flex: 1
-ms-flex-wrap 只支持 wrap 和 nowrap，wrap-reverse 无效；gap 无任何前缀可补

Autoprefixer 不会自动转 `flex: 1` 成 `-webkit-box-flex: 1`

Autoprefixer 只补前缀，不降级语义。它能把 display: flex 补成 display: -webkit-flex，但不会把 flex: 1 转成 -webkit-box-flex: 1，更不会为 Android 4.2 生成 display: -webkit-box —— 因为那属于模型切换，不是前缀问题：

配置 browserslist 时，不能写 android >= 4.4，得明确列 android 4.2、android 4.3
想让 Autoprefixer 输出 -webkit-box 系列，必须显式启用 flexbox: '2009'，v10+ 默认关闭
写了 display: -webkit-flex 手动前缀，Autoprefixer 会跳过整条规则，不再补其他属性
gap、flex-wrap: wrap-reverse、flex-basis: content 这些特性，所有旧引擎都不支持，Autoprefixer 根本不生成等价声明

实际兼容最难的不是写多少前缀，而是判断哪些设备连前缀都不认——比如 Android 4.0 WebView 既不认 display: flex，也不认 display: -webkit-flex，只能退到 float 或 display: table-cell。写前缀只是表层动作，底层渲染限制才是真正的拦路虎。