<p>Chrome 21–28 必须使用 -webkit-flex 前缀，因仅支持旧版 Flex 语法；所有相关属性均需加 -webkit- 前缀且行为有差异，父容器禁用 float/absolute，子项避免 vertical-align，检测应结合 webkitFlex 和 UA 字符串。</p>
Chrome 21–28 为什么需要 -webkit-flex 前缀
Chrome 在 21 到 28 版本间只支持旧版 Flex 语法，display: flex 会被直接忽略，必须写成 display: -webkit-flex 才能触发弹性布局。这不是“加了更好”，而是“不加就完全失效”。这些版本的 Chrome 对 flex-direction、justify-content 等也全部使用 -webkit- 前缀，且属性行为与标准版有差异——比如 -webkit-flex-wrap: wrap 在 Chrome 27 下可能不触发换行，需配合 -webkit-flex: 1 显式声明子项可缩放。
-webkit-flex 的完整属性映射怎么写
不能只改 display，所有涉及 Flex 的关键声明都得补前缀。Autoprefixer 默认不覆盖这么老的 Chrome 版本（除非显式配置 browserslist 包含 chrome >= 21），手动补时注意以下几点：
-
display: -webkit-flex和display: flex必须同时存在，顺序为前缀在前、标准在后 -
flex-direction→-webkit-flex-direction（值相同，如row、column） -
justify-content→-webkit-justify-content（space-between在 Chrome 25 下偶现偏移，建议加margin: 0重置子项默认外边距） -
align-items→-webkit-align-items（center在 Chrome 23 下对 inline 元素无效，需子项加display: block） -
flex简写 → 必须拆成-webkit-flex-grow、-webkit-flex-shrink、-webkit-flex-basis，因为-webkit-flex: 1在 Chrome 26 中解析不稳定
为什么写了 -webkit-flex 还是不生效
常见失效不是因为前缀漏写，而是底层渲染机制限制：
- 父容器若设了
float或position: absolute，Chrome 24–28 会直接丢弃-webkit-flex声明，必须移除这两类定位 - 子元素用了
vertical-align，旧版 WebKit 会优先执行该属性并阻断 Flex 对齐逻辑 - 容器高度依赖
min-height而无明确height，Chrome 27 下align-items: center可能计算为空白区域，建议补height: 100%或用max-height触发渲染 - HTML 结构用了
<table>内嵌<div>，旧版 Chrome 对表格上下文内的-webkit-flex支持极差，应避免在<td>或<th>内启用 Flex
要不要为 Chrome 21–28 单独写媒体查询或 JS 检测
没必要。这类版本全球占比已低于 0.02%（2026 年 5 月 StatCounter 数据），且多数用户早已升级。真正要盯的是：你项目是否被强制要求支持企业内网中锁定 Chrome 27 的老旧终端。如果是，别用 @supports (display: flex)——它在 Chrome 27 下返回 false，但 -webkit-flex 是可用的；更稳妥的方式是用 JS 检测：typeof document.documentElement.style.webkitFlex !== 'undefined'，再动态加载兼容样式表。不过要注意，这个检测在 Chrome 29+ 也会返回 true，所以得配合 UA 字符串二次过滤 Chrome/2[1-8]。
立即学习“前端免费学习笔记（深入）”；
