ie11需用-ms-flexbox语法：display:-ms-flexbox；justify-content用-ms-flex-pack:center；align-items用-ms-flex-align:center；flex-wrap用-ms-flex-wrap:wrap；flex:1应拆为-ms-flex:1。
Flex 布局在现代浏览器中基本无兼容性问题，所谓“不兼容导致排版错乱”，95% 的情况其实是误用了 Flex 属性、遗漏关键声明，或在旧环境（如 IE11）下没加必要兜底——不是 CSS 不兼容，是你没告诉浏览器“怎么兼容”。
IE11 下 flex-direction/justify-content 失效怎么办
IE11 支持的是旧版 Flex 语法（2009草案），display: flex 直接无效，必须用 display: -ms-flexbox；且 flex-direction、justify-content 等属性名都要加 -ms- 前缀。
- 必须同时写两套：
display: flex;display: -ms-flexbox; -
justify-content: center→ IE11 要写-ms-flex-pack: center -
align-items: center→ IE11 要写-ms-flex-align: center -
flex-wrap: wrap→ IE11 要写-ms-flex-wrap: wrap - IE11 中
flex: 1不可靠，建议拆成-ms-flex: 1+flex: 1 - 若容器高度不生效，常因 IE11 对
height: 100%敏感，需显式设父级height: 100%或min-height
Flex 子项突然“塌陷”或高度丢失
典型现象：父容器设了 display: flex，子项内容有文字或图片，但整个子项高度为 0，或者被压扁。这不是兼容性问题，而是 Flex 默认行为没被理解。
-
align-items: stretch（默认值）会让子项拉伸到容器高度，但如果容器本身没高度（比如没设height或min-height），子项就“无处可拉”，视觉上像塌了 - 解决方法不是关掉 stretch，而是给容器一个明确高度来源：
min-height: 200px或父级设height: 100vh，再让子项继承 - 若子项是图片或文本块，检查是否意外设置了
height: 0、overflow: hidden或font-size: 0 - 在 Safari 旧版本（≤15.4）中，
align-items: stretch对img元素可能失效，可加vertical-align: top强制对齐
移动端 Flex 换行后卡片错位、间隙不均
用 flex-wrap: wrap 排卡片时，小屏下换行错位、最后一行右空一大块、列宽忽大忽小——这和兼容性无关，是 gap 和 flex-basis 配合不当造成的。
-
gap在 iOS Safari ≤16.3、Android Chrome ≤103 中部分支持不稳，建议降级方案： 用margin-right+margin-bottom，并配合:nth-child(n)清除末项右侧 margin - 别只写
width: 33.333%，应改用flex: 0 0 calc(33.333% - 12px)（假设 gap 是 12px），避免四舍五入误差累积 - 如果卡片内容高度不一，
align-items: stretch会强制等高，反而放大错位感；直接设align-items: flex-start更可控 - Chrome Android 和某些 UC 内核下，
flex: 1在flex-wrap: wrap容器中可能错误分配剩余空间，推荐统一用flex: 0 1 minmax(280px, 1fr))（需搭配flex-basis）
引入第三方 CSS 后原有 Flex 布局突然失效
常见于引入重置库（如 normalize.css）、UI 框架（如 Bootstrap 5）、或组件库（如 Ant Design）后，justify-content 不起作用、子项堆叠、gap 消失——本质是样式被覆盖，不是兼容性崩了。
- 检查开发者工具的
Computed面板，看display是否被覆盖成block或inline；常见原因是第三方库对ul、div等标签加了全局display: block !important -
gap失效？确认容器是否真为display: flex或display: grid；Flex 中gap在 Firefox - Bootstrap 5 默认启用
flex-wrap: wrap在.row上，如果你的导航栏也用了.row类，就可能意外换行；排查类名冲突最直接 - 某些 UI 库（如早期 Element Plus）会重置
box-sizing，导致padding计算偏差，间接影响 Flex 子项尺寸判断
真正需要操心兼容性的只剩 IE11 和极个别定制 WebView；其他所有“错乱”，几乎都出在属性漏写、方向误判、尺寸失控这三件事上。别急着查兼容表，先打开开发者工具，盯着 Computed 里 flex-direction 和 display 看两秒——八成问题当场就露馅了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
