flex子项等高需满足三前提：父容器有明确高度基准、子项未禁用align-items: stretch、响应式时对齐方式随交叉轴变化同步调整。
直接加 display: flex 不一定能等高——关键不是类写没写，而是父容器有没有可拉伸的高度基准，以及子项有没有悄悄破坏 align-items: stretch 的默认行为。
父容器必须有明确高度来源
Flex 子项等高依赖交叉轴（垂直方向）有可参照的高度。如果父容器 height 是 auto 且没被上级约束，stretch 就无从生效。
- 用
min-h-screen或min-h-[600px]替代h-full，避免 Safari 地址栏切换时视口抖动导致塌陷 - 嵌套场景下，确保上层也提供高度：比如外层
flex-col min-h-screen，中间区域用flex-1 - 别在父容器上同时设
flex-col—— 主轴变垂直后，左右两栏会堆叠，stretch拉伸的是宽度而非高度
子项不能主动“退出”拉伸流程
align-items: stretch 是 flex 容器默认值，无需显式写。但子项自身样式很容易覆盖它：
- 删掉所有
h-24、min-h-32、max-h-60类——这些会锁死高度，直接禁用拉伸 - 检查是否误加了
self-start、self-center或align-self: flex-start—— 它们等于主动声明“我不参与等高” - 图片、iframe 等替换元素默认按
baseline对齐，可加self-stretch强制拉伸 - 避免在子项内用
position: absolute或float，它们会让元素脱离 flex 渲染流
响应式堆叠时要重置对齐方式
小屏切 sm:flex-col 后，交叉轴变成水平方向，items-stretch 开始拉伸宽度，而不是高度——结果是两栏“等宽但高度不一”，反而更难看。
- 堆叠时必须同步加
sm:items-start或sm:items-baseline，关掉拉伸 - 若需堆叠后某栏保底高度，用
sm:min-h-64这类固定值，别依赖stretch - 别只改
flex-direction，对齐方式必须跟着变，否则stretch会作用在错误的轴上
真需要等高边框？别靠子项高度撑
常见需求是两栏间一条贯穿始终的竖线。强行让左右栏等高来“托住”边框，不如把边框画在父容器上：
- 给父容器设
border-r或border-l，再用overflow-hidden配合padding控制视觉留白 - 或者用伪元素
::before绝对定位画线，高度由父容器min-height决定，完全不依赖子项内容 - JavaScript 动态取高再赋值是兜底方案，但软键盘弹出、图片延迟加载、横竖屏切换都会让它失效
真正容易被忽略的点是：等高不是自动发生的，它是一连串前提条件都满足后的自然结果——父容器高度基准、子项未锁死高度、响应式时对齐语义同步更新。漏掉任意一环，flex 就只是排成一行，而不是拉成一样高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
