核心原因是WebView渲染器能力弱且小程序存在rpx转换、高度继承链断裂、flex行为差异三重约束；flex容器未生效表现为子元素堆叠、justify-content无反应，本质是容器未进入flex上下文，需确保display:flex父级有可计算高度并整条链路显式设height:100%或flex:1。
小程序 WebView 里写了响应式 CSS 却仍错位，核心原因是：WebView 渲染器对现代 CSS 的解析能力弱于标准浏览器，且小程序运行环境本身有三重隔离约束（rpx 转换、高度继承链断裂、flex 默认行为差异），不是“响应式没生效”，而是“布局上下文根本没建立起来”。
flex容器没进入 flex 上下文的典型表现
子元素堆叠、justify-content 无反应、align-items 失效——这些都不是属性写错了，而是容器压根没被识别为 flex 容器。
-
display: flex写在了父级，但该父级没有可计算高度：小程序中height: 100%不自动继承，必须整条链路（page→view→ 子容器）都显式设height: 100%或flex: 1 - 错误写法：
.container { display: flex; }，但.container的父级没设高度，自身又无内容撑开，最终高度为0 - 调试技巧：给容器加
background: red，一眼看出它是否真有尺寸；用 WXML 的<view class="container">包裹，别依赖空标签或文本节点“撑高”
rpx 混入 flex-basis / min-width 导致跨设备错位
rpx 在 flex 计算中会动态转换单位，但不同设备 DPR 和屏幕宽度差异大，导致 flex-basis: 300rpx 在 iPhone 6 上是 150px，在 iPad 上可能变成 409px，再叠加 flex-shrink: 1 就彻底失控。
- 危险组合：
flex: 1 1 200rpx→ 改为flex: 1+ 单独min-width: 200rpx（并评估是否真需要） - 推荐做法：容器自身尺寸（
width/height）可用 rpx；弹性行为（flex、flex-grow）只用无单位数字 - 边框/内边距慎用 rpx：
border: 1px solid #ccc更稳；padding: 20rpx在小屏过小、大屏过大，优先用固定像素或gap
viewport 缺失引发的连锁错位
小程序 WebView 虽不走 HTML <meta>，但其渲染逻辑仍受全局视口约束。漏掉 initial-scale=1.0 或 maximum-scale=1.0，会导致 100vh 锁定初始高度、fixed 元素锚点漂移、键盘弹出时 visualViewport.height 不稳定。
立即学习“前端免费学习笔记（深入）”；
- 必须确保
page标签上配置了style="height: 100vh;"或更稳妥的style="min-height: 100vh; min-height: 100dvh;"（注意顺序） - 避免对
html或body设height: 100vh—— 小程序里它们不存在，设了也无效 - 键盘弹出时输入框被盖住？关键区域加
flex-shrink: 0，并确保其父容器是flex: 1的滚动上下文
Skyline 模式下默认 layout 行为突变
如果你的小程序已启用 Skyline 渲染模式，错位大概率来自底层布局模型切换：Skyline 默认把根节点和多数容器设为 display: flex; flex-direction: column，且盒模型默认是 box-sizing: border-box。
- 原本靠
float或inline-block实现的横向导航，在 Skyline 下会直接竖排堆叠 - 检查 WXML 中疑似出问题的容器，显式覆盖默认值：
display: block或display: flex; flex-direction: row - 旧 UI 库（如 Vant）若内部用了
position: absolute或transform，会脱离 Skyline 的 flex 流，display: flow-root也救不了，得单独重写定位逻辑
真机测试时最容易忽略的细节：iOS Safari 和 Android WebView 对 flex-basis 解析不一致，有的转成 auto，有的保留像素值；visualViewport.height 在键盘收起瞬间有几十毫秒延迟，直接读可能拿到旧值——必须加 setTimeout(() => {}, 50) 防抖。
