移动端两栏等高布局靠 align-items: stretch 实现，但需避免子项设 height/min-height、父容器无高度基准或 flex-direction: column 等误用；应使用 min-height: 100vh、flex: 1 配合自然 stretch，并规避软键盘、视口变化等导致的塌陷。
移动端两栏等高布局，靠 align-items: stretch 就够了——但前提是别手动锁死子项高度，也别让父容器“没底”。
为什么写了 align-items: stretch 却不等高？
这不是属性失效，而是它被悄悄覆盖或失去作用基准：
-
align-items: stretch是 flex 容器的默认值，显式写出来通常没必要；真正让它“失灵”的是子项自己设置了height、min-height或flex-shrink: 0配合固定尺寸 - 父容器
height: auto且内部无内容撑开时，交叉轴（高度方向）没有参考高度，stretch 就无从拉伸——结果就是各栏按自身内容高度显示 - 用了
flex-direction: column却还指望“等高”，此时stretch作用在宽度方向，和高度无关 - iOS Safari 在地址栏收起/展开时会重绘 viewport，若父容器只设
height: 100vh，可能瞬间塌陷导致等高闪退
移动端必须加的两个兜底控制
仅靠默认 stretch 不足以应对软键盘、横竖屏、系统缩放等真实场景：
- 父容器统一用
min-height: 100vh，而非height: 100vh，避免 Safari 视口动态变化引发高度归零 - 子项禁用
height: 100%和min-height，改用flex: 1（影响主轴分配）+ 保持交叉轴自然 stretch；若需最小高度，用min-height: 44px这类绝对值，而非相对单位 - 图片加载延迟易造成初始高度塌陷：给
<img>加height: auto和max-width: 100%，同时确保其父容器有min-height防抖动 - 慎用
position: sticky或fixed嵌套在 flex 子项里——它们脱离文档流，可能让 stretch 失去计算依据
flex: 1 和 align-items: stretch 到底谁管等高？
分工明确，别混用：
-
flex: 1（即flex-grow: 1）只影响主轴空间分配。在flex-direction: row下，它让右栏“吃掉剩余宽度”，和高度无关 -
align-items: stretch才真正控制交叉轴（高度）对齐行为——只要子项没锁死高度，且父容器有可拉伸的高度基准，它就自动填满 - 常见误操作：给两栏都写
flex: 1并以为这能“等高”，其实只是宽度均分；等高与否，完全取决于stretch是否生效
真正难的不是写对那行 CSS，而是在软键盘弹出、横竖屏切换、图片异步加载、iOS 地址栏动画这些时刻，stretch 依然有高度可依、有内容可撑、有渲染可稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
