Flexbox实现移动端等高卡片的核心是确保父容器有可拉伸高度基准并使align-items: stretch生效；常见失效原因包括height: 100vh在iOS Safari中塌陷、未约束图片导致重排、子项设百分比高度或flex-direction: column误用；需改用min-height: 100vh、禁用height: 100%、统一图片max-width: 100%; height: auto，并避免position: sticky/fixed脱离文档流。
Flexbox 实现移动端等高卡片，核心不是“让卡片变高”，而是让父容器有可拉伸的高度基准，再靠 align-items: stretch 自然生效——但这个默认行为在移动端极易被软键盘、视口缩放、图片异步加载打断。
为什么写了 display: flex 却不等高？
这不是 Flex 失效，是它失去了拉伸依据：
- 父容器只设
height: 100vh：iOS Safari 地址栏收起时会重绘视口，100vh变成“当前可视区域高度”，可能瞬间塌陷，导致子项按内容高度各自渲染 - 某张卡片里有未约束的
- 子项写了
height: 100%或min-height: 100%：百分比高度依赖父容器有明确height，而 Flex 容器通常没有固定height，结果计算为 0 - 用了
flex-direction: column还想“等高”：此时align-items: stretch作用在宽度方向，对高度完全无效
移动端必须加的两个兜底控制
仅靠默认 align-items: stretch 不足以应对真实场景：
- 父容器用
min-height: 100vh，不是height: 100vh——哪怕视口临时变小，也有底线可依 - 子项禁用所有百分比高度声明，改用
flex: 1（仅当需主轴均分）+ 保持交叉轴自然 stretch；若需最小高度，写死如min-height: 44px，避免min-height: 100% - 给卡片内图片统一加
max-width: 100%; height: auto;，并确保其父容器（如卡片本身）有min-height防初始塌陷 - 避免在卡片内部用
position: sticky或position: fixed——它们脱离文档流，会让 stretch 失去计算锚点
flex: 1 和 align-items: stretch 到底谁管等高？
分工非常明确，混用反而坏事：
-
flex: 1（即flex-grow: 1）只影响主轴空间分配。在flex-direction: row下，它让右卡片“吃掉剩余宽度”，和高度无关 -
align-items: stretch才真正控制交叉轴（高度方向）对齐。只要子项没锁死高度（如没设height、min-height），且父容器有可拉伸的高度基准，它就自动填满 - 常见误操作：给所有卡片都写
flex: 1并以为这能“等高”，其实只是宽度均分；等高与否，完全取决于stretch是否生效
真正难的不是写出那几行 CSS，而是在软键盘弹出、横竖屏切换、图片懒加载完成、iOS 地址栏动画这些毫秒级变化中，stretch 依然有高度可依、有内容可撑、有渲染可稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
