flex布局兼容性问题源于未适配旧浏览器语法变体：ie10/11需-ms-前缀，android 4.4以下需-webkit-box，autoprefixer配置遗漏或插件顺序错误会导致前缀缺失，flex-shrink等属性在safari/ios易引发收缩异常。
Flex 布局本身不会拖慢兼容性，但**不加处理地直接使用标准语法，会让旧浏览器完全失效或错乱**——问题不在 Flex，而在你是否覆盖了目标环境所需的语法变体和降级路径。
IE10/11 为什么 flex 会“突然不工作”
IE10 只认 -ms-flexbox，IE11 虽支持 display: flex，但很多属性仍需 -ms- 前缀，比如：-ms-flex-direction、-ms-flex-wrap。直接写 flex-direction: row 在 IE11 中会被忽略。
- 必须把
display: -ms-flexbox放在display: flex之前（否则新版浏览器会跳过） -
flex: 1在 IE10/11 中等价于-ms-flex: 1，但若子项没设width或min-width，可能塌缩成 0 - IE10 不支持
align-items: stretch的自动拉伸，需显式设height: 100%或min-height
Android 4.4 以下手机显示空白或堆叠
Android 4.1–4.3 内核基于旧版 WebKit，只识别 2009 年草案语法：display: -webkit-box 和 -webkit-box-orient。写 display: flex 对它们完全无效。
- 横向布局要同时写：
-webkit-box-orient: horizontal+-webkit-flex-direction: row - 子项伸缩必须用
-webkit-box-flex: 1，且得配width: 0（否则老 Android 会按内容宽度撑开，破坏均分） - 避免单独依赖
gap：Android 4.4 以下不支持，得用margin模拟，但注意首尾多余间距
为什么 autoprefixer 有时还是出错
Autoprefixer 默认只输出目标浏览器支持的前缀，但如果 browserslist 配置漏掉 IE 10 或 and_qq 1.2（QQ 浏览器旧内核），它就不会生成对应规则。
- 检查
package.json中的"browserslist"是否包含ie >= 10、and_uc >= 11等明确条目 -
flex: 1会被转成多行，但flex: 0 1 auto这类复杂值在 IE10 下行为不稳定，建议拆成-ms-flex: 0 1 auto手动覆盖 - PostCSS 插件顺序很重要：
autoprefixer必须在postcss-preset-env之后，否则@supports块内的 flex 规则可能被跳过
flex-shrink 导致内容被压缩却查不到原因
默认 flex: 1 展开为 flex: 1 1 0，其中 flex-shrink: 1 在空间不足时强制收缩——这在 Safari 9、iOS 9.3 上尤其明显，文字被挤成一坨，图片像素化。
- 对固定尺寸元素，直接写
flex-shrink: 0，别依赖flex: 0 0 auto（IE10 不识别后两个参数） - 文本容器加
min-width: max-content或具体值（如min-width: 80px），防止收缩到不可读 - 慎用
flex-basis: auto：Safari 8–9 计算逻辑异常，换成flex-basis: 0+min-width更稳
真正卡住项目的往往不是“能不能用 Flex”，而是某一行 flex: 1 在 iOS 9.2 上触发了隐式收缩，或是 Android 4.2 把 flex-wrap: wrap 当成无效声明导致子项溢出——这些细节不跑真机、不看 devtools 的 computed 样式，根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
