align-items: stretch 是等高的关键，因为它让未设 height/min-height 的子项自动填满容器交叉轴（如 flex-direction: row 时的高度方向）；需父容器有明确高度或由内容撑开，且该属性为 flex 默认值，无需显式声明。
为什么 align-items: stretch 是等高的关键
它不是“让两栏变高”，而是让没设 height 的子项自动填满容器的交叉轴（对 flex-direction: row 来说就是高度方向）。只要父容器有明确高度（或由内容撑开），且子项没用 height、min-height 锁死自身，align-items: stretch 就会生效——这是 flex 的默认行为，不用显式写出来。
常见错误现象包括：
- 写了
align-items: stretch但没效果 → 实际是子项自己设置了height: 100%或min-height，覆盖了 stretch 行为 - 父容器
height: auto且无内容撑高 → 子项拉伸无参考基准，结果高度为 0 或仅包裹内容 - 用了
flex-direction: column却还指望宽度等宽 → stretch 此时作用在水平方向，和“等高”无关
移动端适配必须处理的三个细节
移动端屏幕窄、字体渲染差异大、软键盘弹出会触发 viewport 缩放，这些都会干扰 flex 等高表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
min-height: 100vh，而不是height: 100vh，避免 Safari iOS 在地址栏收起/展开时重绘异常 - 子项避免用
em或rem做固定高度，改用flex-basis或flex: 0 0 auto控制基础尺寸 - 图片加载延迟可能导致初始高度塌陷 → 给
<img alt="如何快速实现移动端两栏等高布局_利用CSS Flexbox中的align-items: stretch属性" >加height: auto和max-width: 100%，并设置容器min-height防抖动 - 如果用
position: sticky或fixed元素嵌套在 flex 子项里，注意它们会脱离文档流，可能让 stretch 失效
flex: 1 和 align-items: stretch 到底谁在起作用？
两者分工不同：flex: 1（即 flex-grow: 1）决定子项如何分配剩余空间，影响的是主轴（宽度）；align-items: stretch 影响的是交叉轴（高度）。在两栏横向布局中，真正让两栏“等高”的是后者，前者只是让右栏自适应宽度。
容易踩的坑：
- 误以为
flex: 1能拉高元素 → 它只在主轴方向生效，对高度无直接影响 - 给左栏设
width: 200px，右栏设flex: 1，但忘了左栏也要flex-shrink: 0，否则内容多时会被压缩变形 - 在嵌套 flex 容器里重复设
align-items，导致内层子项被意外拉伸（比如卡片内部文字行高被撑开）
兼容性底线：iOS Safari 和 Android WebView 怎么看？
当前（2026 年）所有主流移动浏览器都已完整支持 display: flex 和 align-items: stretch，包括 iOS Safari 14.5+、Chrome for Android 80+、Samsung Internet 15+。唯一需留意的是：
- 旧版 WebView（如某些国内定制 ROM 内置浏览器）可能不支持
flex-wrap: wrap下的 stretch，但单行两栏不受影响 - 如果项目仍需支持 Android 4.4.x（已极少见），
align-items在部分机型上有渲染延迟，可加transform: translateZ(0)强制 GPU 加速 - 不要依赖
flex: 1 1 auto的简写 —— 某些低端 Android 设备解析不稳定，拆成flex-grow: 1; flex-shrink: 1; flex-basis: auto;更稳妥
真正复杂的地方不在语法，而在于你是否意识到：等高只是视觉结果，内容溢出、图片加载、软键盘弹起、动态插入 DOM 这些真实场景，会让 stretch 表现得不像文档里写的那么“理所当然”。
