移动端Flex兼容需加-webkit-前缀、禁用gap、设min-width: 0；iOS/Android旧内核对flex-grow、flex-wrap、gap等支持差，必须双写声明、降级方案及特性检测。
Flex属性是否加了-webkit-前缀
移动端老内核（如iOS Safari 12–14、微信X5）对flex-grow、flex-wrap等属性仍需-webkit-前缀才能生效，漏掉就会直接忽略该声明。
常见错误现象：justify-content: space-between在微信里失效，但Chrome模拟器正常；flex: 1在iOS 13上子项不撑开。
- 必须同时写两行：
display: -webkit-flex;和display: flex; -
flex-wrap在Android 4.4 WebView中完全不支持，不能只靠加前缀补救，得降级为display: block+width手动分栏 - 用Autoprefixer时确认配置目标浏览器版本，比如
"iOS >= 12", "Android >= 4.4"，否则默认可能跳过旧前缀
gap属性在移动端根本不可用
gap是Flex布局里最易踩坑的“伪现代特性”——它在Chrome for Android和Safari 14.5+才真正可用，此前所有主流移动端内核都无视它，且不会降级为margin。
常见错误现象：卡片列表用gap: 12px写得干净利落，真机一跑全是粘连；开发者工具里看着正常，是因为模拟器用了桌面内核。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
gap做关键间距，改用margin配合:not(:last-child)或flex-direction: column+margin-bottom - 如果坚持用
gap，必须搭配@supports (gap: 0)做特性检测，给不支持的环境兜底 - 微信X5内核至今不支持
gap，哪怕加-webkit-gap也无效
容器没设min-width: 0导致横向溢出
Flex容器默认min-width: auto，遇到长文本、未约束<img alt="在CSS3中如何排查Flex布局在不同浏览器内核下的渲染差异" >或inline-block元素时，会强行撑宽容器，触发横向滚动条，尤其在iOS Safari中表现更激进。
常见错误现象：页面右侧莫名出现滚动条；键盘弹出后布局错位；Android低端机渲染卡顿。
- 所有Flex容器都应显式加
min-width: 0（或min-height: 0用于column方向） - 这个值不是“可选优化”，而是防止渲染引擎反复测量换行点的硬性约束
- 若子项含
img，还需额外加img { max-width: 100%; height: auto; }，否则min-width: 0也压不住
键盘弹出时flex容器高度重算异常
移动端软键盘弹出会触发视口缩放和resize事件，但部分内核（尤其是iOS Safari）在键盘收起后不重绘Flex容器高度，导致内容被裁切或留白。
常见错误现象：输入框聚焦后，下方Flex列表突然变高/变矮；键盘收起后底部按钮消失。
- 避免对Flex容器设固定
height，改用max-height+overflow: auto - 监听
keyboardWillShow/keyboardWillHide（iOS原生）或focusin/focusout事件，手动触发container.style.height = 'auto'再重置 - 微信内置浏览器中，
position: fixed+ Flex组合极易失常，优先改用position: sticky或JS动态控制定位
min-width: 0没写、flex-wrap误设、或gap当真用了。 
