flex等高失效的根本原因是父容器缺乏高度基准或子项主动限制高度。需确保父容器有可依高度（如min-height:100vh）、子项未锁定高度、图片容器设最小高度，并在响应式中合理切换对齐方式。
直接用 display: flex 就能实现，但多数人失败不是因为写错了属性，而是父容器没高度基准、子项自己锁死了高度。
为什么写了 display: flex 还是不等高
这不是 Flex 失效，是浏览器没东西可拉——align-items: stretch（默认行为）需要交叉轴有尺寸依据：
- 父容器
height: auto且无内容撑开 → computed height 是0px或auto，stretch 无从下手 - 子项写了
height: 100%、min-height: 200px或self-start→ 直接覆盖 stretch 行为 - 用了
flex-direction: column后还指望items-stretch拉高 → 此时它拉的是宽度，不是高度 - 图片异步加载，初始占位为 0，父容器塌陷 → stretch 一上来就失效，图加载完又抖动
移动端必须加的两个高度保障
别只写 flex，得让父容器有“可依的高度”：
- 用
min-h-screen（Tailwind）或min-height: 100vh（原生），而不是height: 100vh：Safari 在地址栏收起/展开时会重绘 viewport，height: 100vh可能瞬间归零 - 如果嵌套在滚动区域里（比如
main区域），外层需设flex-1或flex: 1，再在其内部设flex，否则子项没有统一拉伸基准 - 图片父容器加
min-h-44（或具体值），<img>加h-auto max-w-full，防加载延迟导致塌陷
响应式切换时的对齐陷阱
小屏堆叠不是加个 sm:flex-col 就完事：
-
sm:flex-col后，items-stretch拉的是宽度，两栏会变宽、高度反而不一致 - 必须同步加
sm:items-start（或sm:items-flex-start），显式关闭拉伸 - 若仍想堆叠后“视觉等高”，改用
sm:grid-cols-1 grid grid-cols-2+grid-auto-rows-fr，Grid 的跨行等高更稳
别碰 position: absolute 模拟等高
它只是画了个框，不是真等高：
- 父容器必须同时设
position: relative和明确height，漏一个就错位 - 软键盘弹出、图片加载完成、iOS 地址栏变化 → 父容器实际高度突变，absolute 子项不会重拉伸
-
overflow-y: auto加不加不统一，滚动条出现时机不同，视觉立刻不对齐 - DOM 高度始终不一致，JS 调
offsetHeight一眼暴露问题
真正难的不是让两栏“看起来一样高”，而是它们在软键盘弹出、图片加载、横竖屏切换这些真实交互中始终同步变化。Flex 的 stretch 机制依赖渲染流完整性，任何脱离文档流、手动设高、或高度计算断链，都会让它静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
