如何解决CSS Flexbox布局在旧版移动端浏览器中的兼容性？-css教程-PHP中文网

旧安卓4.3及更早必须用display: -webkit-box且置于display: flex之前，仅加前缀无效；安卓4.4支持display: -webkit-flex但禁用gap和calc()；ie10/11需-ms-flexbox并展开flex: 1为-ms-flex: 1 1 0%；@supports在安卓4.4下完全失效，降级样式须写在块外。

如何解决css flexbox布局在旧版移动端浏览器中的兼容性？

旧安卓 4.3 及更早：必须用 `display: -webkit-box`，不是加前缀就能修好

旧安卓（4.3 及更早）的 WebView 内核压根不解析 display: flex 或 display: -webkit-flex，写了就等于没写。它只认 display: -webkit-box，而且必须放在 display: flex 前面——顺序颠倒或漏掉第一行，整个容器直接退化成 display: block。

.container { display: -webkit-box; display: flex; } 是硬性顺序，不能交换，也不能省略任一行
-webkit-box-orient: horizontal 对应 flex-direction: row，但不能写 row；-webkit-box-pack: center 才是 justify-content: center 的等效写法
-webkit-box-flex: 1 不是“占满剩余空间”，而是按权重分配——兄弟项设 -webkit-box-flex: 2，它们就按 1:2 分剩余宽度
子元素若设了 width 或 max-width，会直接压制 -webkit-box-flex 行为，必须删掉或改用 min-width

安卓 4.4：可用 `display: -webkit-flex`，但别碰 `gap` 和 `calc()`

安卓 4.4 WebView（Chromium 30）支持的是 2012 年草案版 display: -webkit-flex，它比 -webkit-box 多支持 flex-wrap: wrap，但仍不认现代语法，且对计算类属性极度敏感。

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

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

下载

必须写 display: -webkit-flex，不能只写 display: flex；同时保留无前缀版本供高版本浏览器使用
-webkit-flex-wrap: wrap 可用，但 wrap-reverse 和 space-around 不支持；-webkit-justify-content 只认 flex-start/center/flex-end/space-between
gap、place-items、任何含 calc() 的 flex-basis 或 flex 值，都会被静默丢弃——整条声明无效，不报错也不提示
viewport 必须完整：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，漏掉 maximum-scale 会导致容器宽度计算异常

IE10/11：靠 `display: -ms-flexbox`，但 `flex: 1` 得拆开写

IE10 只识别 display: -ms-flexbox，IE11 虽支持无前缀 display: flex，但关键行为仍依赖 -ms- 前缀属性。最常踩坑的是 flex 缩写——IE10 把 flex: 1 解析为 flex: 1 1 auto，但又不支持三值语法，结果子项宽度归零。

IE10 必须用 display: -ms-flexbox，并配 -ms-flex-pack（对应 justify-content）、-ms-flex-align（对应 align-items）
flex: 1 在 IE 中必须展开为 -ms-flex: 1 1 0%，否则塌缩；flex-wrap: wrap 在 IE10 中完全无效，别白费力气
gap 全版本不支持，降级必须用 margin 模拟，且要配合 :nth-child 清除末尾边距
Flex 容器自身必须有明确高度约束（如 height 或 min-height），否则 flex: 1 子项可能直接消失——插件不会帮你补这个

Autoprefixer 别指望它“自动兼容”，它只加前缀，不修语义

Autoprefixer v10+ 默认不输出 -webkit-box 相关声明，也不会把 flex: 1 转成 -webkit-box-flex: 1 或 -ms-flex: 1 1 0%。它只做语法映射，不做逻辑降级。

要让它输出 -webkit-box 系列，必须显式启用旧语法模式：flexbox: '2009'，否则配置 browserslist: ["android 4.3"] 也无效
即使开了 flexbox: '2009'，它也不会处理 align-self、order 或 flex-wrap 的等效转换——这些得手写
@supports (display: grid) 在安卓 4.4 下完全失效，因为该内核既不支持 grid，也不认识 @supports 规则本身；降级样式必须写在 @supports 块外
真正要命的兼容点往往不在 CSS 本身：比如父容器没设宽高、img 标签缺 height 导致 flex 计算中断、或 JS 动态插入内容后未触发重排——这些都得实机调试才能暴露