flex子项等高需父容器有高度基准且未被干扰：父容器必须display:flex并设min-height（如100vh），子项不能设height/min-height或align-self:flex-start，响应式切换时需同步调整对齐方式，多行场景应改用grid。
父容器必须是 display: flex，且有高度基准
Flex 子项等高不是自动发生的魔法，它依赖父容器在交叉轴（默认是垂直方向）上有可参照的高度。如果父容器 height 是 auto 且没被上级约束，子项就无高度可拉伸。
常见错误现象：加了 display: flex 但两栏一高一矮，用开发者工具检查父容器的 computed height —— 如果是 0px 或 auto 且实际渲染为 0，就是根源。
- 给父容器加
min-height: 100vh（比height: 100vh更稳，尤其防 Safari 地址栏切换抖动） - 嵌套场景下，确保上层容器也提供高度来源，比如外层
flex-col min-h-screen，中间区域用flex-1 - 避免父容器同时设
flex-direction: column，否则主轴变垂直，两栏会堆叠而非并排
子项不能主动破坏 stretch 行为
align-items: stretch 是 flex 默认值，它让未设 height/min-height 的子项填满交叉轴。但这个行为极易被覆盖。
常见干扰项：
- 子项写了
height: 100%或min-height: 200px→ 直接禁用拉伸 - 子项写了
align-self: flex-start或self-start（Tailwind）→ 跳出拉伸流程 - 子项内用了
position: absolute、float或display: table-cell→ 脱离 flex 渲染流 - 图片等替换元素默认 baseline 对齐，可加
align-self: stretch强制拉伸
响应式切换时别只改 direction，要重置对齐
小屏堆叠时用 sm:flex-col 很常见，但很多人忽略：一旦 flex-direction: column，交叉轴变成水平方向，items-stretch 拉伸的是宽度，不是高度。
结果就是两栏“等宽”但高度不一致，视觉上反而更不整齐。
- 堆叠时显式加
sm:items-start或sm:items-baseline，取消拉伸 - 不要只靠
flex-col切换方向，必须同步控制对齐方式 - 若需堆叠后仍保持某栏最小高度，改用
sm:min-h-64这类固定值，而非依赖 stretch
Flex 不适合多行卡片等高，该换 Grid
当两栏内容可能换行（比如 flex-wrap: wrap），或你需要三行卡片全部严格等高，Flex 就力不从心了——它只保证同一行内等高，跨行高度各自计算。
这时 display: grid 更可靠：
-
grid grid-cols-2 grid-auto-rows-fr：所有行都按最高项等分高度 -
sm:grid-cols-1自动退化为单列，无需手动重置对齐 - 注意别写
grid-rows-max-content，它会让等高完全失效 - Safari ≤15.4 对
grid-auto-rows: 1fr有 bug，可降级为minmax(0, 1fr)
真正容易被忽略的点是：等高不是“自动发生”的结果，而是拉伸机制在特定条件下的表现。一旦子项带了任何高度约束，或父容器渲染模式被干扰（比如复用组件里悄悄重置了 align-self，或第三方库注入了 min-height: 0），这个机制就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
