<p>Chrome 21–28 必须用 display: -webkit-flex 且所有 Flex 属性加 -webkit- 前缀；Android 4.3 及更早需降级为 display: -webkit-box；IE10–11 用 display: -ms-flexbox；Autoprefixer 不自动降级 flex 语法，仅补前缀。</p>
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。这不是加前缀的问题，是整套属性名和逻辑都不同：
- 顺序必须严格：
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 根本不生成等价声明
display: flex，也不认 display: -webkit-flex，只能退到 float 或 display: table-cell。写前缀只是表层动作，底层渲染限制才是真正的拦路虎。 
