移动端Flex布局高度不统一的解法是：父容器设display: flex且align-items: stretch，子项用min-height替代height，图片设宽高或aspect-ratio，字体统一font-size和line-height。
移动端网页元素高度不统一，常见于 Flex 布局中子项内容长短不一、字体渲染差异或图片加载异步导致的“参差感”。核心解法不是强行设固定 height（易被截断或留白），而是用 align-items: stretch 保证默认拉伸，再配合 min-height 设底线保障，兼顾弹性与一致性。
确保父容器是 flex 且 align-items 为 stretch
Flex 子项默认就继承 align-items: stretch（前提是父容器设了 display: flex 且未显式覆盖）。但容易被忽略的是：如果父容器设置了 align-items: flex-start 或 center，子项就不会自动拉伸。检查并重置即可：
- 父容器必须有
display: flex或display: inline-flex - 确认未设置
align-items: flex-start / center / baseline等值 - 如需局部控制，可用
align-self: stretch单独作用于某子项
用 min-height 替代 height 应对内容波动
移动端屏幕小、字体缩放、系统字号设置都可能导致文字行数变化。直接写 height: 80px 容易溢出或压扁。更稳妥的做法是：
- 设
min-height: 80px，让容器至少撑开到这个高度 - 配合
box-sizing: border-box，避免 padding/border 额外增加高度 - 对图文混合区块，可结合
line-clamp或display: -webkit-box限制文本行数，防无限撑高
图片和图标需明确尺寸或占位策略
图片未设宽高、加载中空白、或 SVG 未设 viewBox，都会破坏高度一致性：
立即学习“前端免费学习笔记（深入）”；
- 图片统一加
width: 100%; height: auto;或指定aspect-ratio（现代浏览器支持） - 关键位置图片建议用
object-fit: cover+ 固定容器min-height，防止变形又保比例 - 图标用 inline SVG 时，确保有
width和height属性，或包裹在固定尺寸的span内
字体和行高要全局收敛
不同手机系统（iOS vs Android）、用户系统字号设置、甚至微信内置浏览器，都会影响实际行高。统一高度的前提是视觉节奏可控：
- 根元素设
font-size: 16px，用rem基于它缩放，避免 viewport 缩放混乱 - 段落类容器设
line-height: 1.5（无单位），比px/em更稳定 - 慎用
vertical-align: middle在 inline 元素上——它依赖基线，移动端基线计算更不可控
