微信中display: flex高度坍塌是因旧版渲染引擎未识别Flex上下文，需按顺序声明四层display（-webkit-box/-webkit-flex/-ms-flexbox/flex）并补全对应旧版align-items、flex等属性。
直接写 display: flex 在微信里导致高度坍塌，不是 Flex 本身坏了，而是底层渲染引擎压根没识别到这个容器是 Flex 容器——它在某些机型上根本没进 Flex 上下文，子项依然按普通流或浮动逻辑计算高度，父容器自然塌成 0。
为什么 display: flex 在微信里会“失效”导致高度坍塌
微信内置浏览器的渲染层不统一：Android 4.3 及更老系统用的是系统 WebView，只认 display: -webkit-box；微信 6.2–6.7 的早期 X5 内核对 flex: 1 和 align-items 支持残缺，但又不报错，结果就是子项不伸缩、不居中、父容器高度算不出来；iOS 8–9.3 虽用 WKWebView，但实际跑的是 UIWebView 兼容层，display: flex 被完全忽略，连主轴方向都不生效。
这些场景下，父容器没有建立有效的弹性上下文，子项虽视觉上排好了，但布局引擎认为它们仍是“脱离文档流的孤儿”，高度计算就归零了。
- 现象：父容器背景色/边框只剩一条线，
offsetHeight为 0，后续元素上浮覆盖子项 - 关键误判点：只检测
navigator.userAgent.includes('MicroMessenger')就加前缀，但 iOS 微信 9.0.5 实际仍走 UIWebView fallback，必须结合typeof window.X5JSSDK !== 'undefined'或QQBrowser版本号双重判断 - Autoprefixer 默认不生成
-webkit-box，因为它是已废弃语法，但微信还在用——工具链再先进，也救不了漏掉这一层的手动兜底
必须手写的四层 display 声明顺序
不能依赖工具自动生成，必须显式按兼容优先级从旧到新排列，浏览器取第一个能识别的值。漏掉任意一层，对应机型就会退化成普通块级容器，高度坍塌立即复现。
立即学习“前端免费学习笔记（深入）”；
/* 必须严格按此顺序，不可调换 */<br>.container {<br> display: -webkit-box;<br> display: -webkit-flex;<br> display: -ms-flexbox;<br> display: flex;<br>}
-
display: -webkit-box：Android 4.3 / iOS 8 的唯一入口，不写这行，整个 Flex 上下文就建不起来 -
display: -webkit-flex：iOS 9–10、X5 中期版本的主力识别项，仅靠 -webkit-box 无法启用justify-content -
display: -ms-flexbox：IE 10–11 和部分旧版 Edge 的兜底，微信 Windows 版偶尔会触发 -
display: flex：现代标准，放在最后，避免覆盖前面的有效声明
align-items 和 flex 类属性必须配对补旧版
即使容器声明了四层 display，子项若只写标准属性，依然会坍塌。因为旧引擎根本不解析 align-items 或 flex: 1，子项尺寸、位置、伸缩行为全部丢失，父容器失去所有撑高依据。
.container {<br> display: -webkit-box;<br> display: -webkit-flex;<br> display: -ms-flexbox;<br> display: flex;<br> -webkit-box-align: center;<br> -webkit-align-items: center;<br> -ms-flex-align: center;<br> align-items: center;<br>}<br><br>.item {<br> -webkit-box-flex: 1;<br> -webkit-flex: 1;<br> -ms-flex: 1;<br> flex: 1;<br>}
-
-webkit-box-align是-webkit-box模式下的对齐开关，不写它，align-items在 iOS 8 下等于不存在 -
-webkit-box-flex: 1控制子项在-webkit-box模式下的伸缩权重，缺它，子项宽度固定为内容宽，剩余空间被丢弃 - 不要省略
-ms-flex：X5 内核某些 build 会识别它但忽略-webkit-flex，双写才能覆盖所有路径
高度坍塌最易被忽略的触发点：伪元素清除和 min-height
很多团队加完四层 display 还是塌，问题常出在两个隐蔽地方：一是用了 ::after 清除浮动的旧式 clearfix，它和 Flex 容器混用会干扰 height 计算；二是给容器设了 min-height: 0，这在 X5 内核下会强制截断弹性高度计算，让 flex: 1 失效。
- 如果父容器同时存在
float子项和 Flex 子项，务必移除任何clearfix类，Flex 容器自身不依赖清除浮动 - 避免对 Flex 容器设置
min-height: 0或height: 0，X5 会把它当作“不可伸缩”的硬约束，不再响应flex-grow - 调试时用
getComputedStyle(el).display看真实生效的是哪一层，而不是只信 DevTools 样式面板里划掉的那条
