flex子元素默认等高，前提是父容器有明确高度来源且子项未设height/min-height/align-self等干扰；失效主因是拉伸无基准或子项主动破坏stretch行为。
直接给父容器加 flex 和 items-stretch（通常不用显式写，因为它是默认值），子项就会等高——但前提是父容器有明确高度来源，且子项没主动破坏拉伸行为。
为什么加了 flex 还是不等高
不是 items-stretch 失效，而是它没“东西”可拉。浏览器需要一个交叉轴尺寸作为基准：
- 父容器没被撑开：比如外层是普通
div，没设height、min-height，也没在 flex 上下文中被分配空间 → 子项只能按各自内容高度渲染 - 子项自己写了
h-12、min-h-20或max-h-40→ 这些会覆盖 stretch 行为 - 子项用了
self-start、self-center→ 相当于显式设置align-self: flex-start，跳出了拉伸流程 - 父容器设了
overflow-hidden且子项有mb-4→ 高度被截断，视觉上像不等高
flex-col 下误用 items-stretch 导致“等宽”而非等高
很多人切响应式时加 flex-col，结果发现两栏变宽了、高度反而不一致——这是因为 flex-direction: column 后，交叉轴变成水平方向，items-stretch 拉伸的是宽度，不是高度。
正确做法：
- 想让两栏等高，保持
flex-row（或不写，默认就是） - 小屏堆叠时，用
sm:flex-col sm:items-start显式取消拉伸，避免留白过高 - 别只靠
flex-col切换方向，必须同步重置对齐方式
嵌套 flex 容器中如何让子项真正等高
常见场景：侧边栏 + 主内容区，希望两者高度一致。不能只在外层加 flex，得让主区域“占满剩余空间”：
- 外层容器设
flex flex-col min-h-screen - 顶部/底部固定高度后，中间区域加
flex-1并设flex - 该区域内的两栏才具备统一拉伸基准，此时
items-stretch才真正起效 - 示例结构：
<div class="flex flex-col min-h-screen"> <header>...</header><main class="flex-1 flex"><aside class="w-64">...</aside><section class="flex-1">...</section></main> </div>
用 grid 替代 flex 的更稳方案
当需要多行卡片、或担心 flex-wrap 导致跨行不等高时，grid 更可靠：
-
grid grid-cols-2 gap-4→ 默认每行内等高，但不同行之间不统一 -
grid grid-cols-2 grid-auto-rows-fr→ 所有行都按最高项等分高度 - 移动端堆叠：用
sm:grid-cols-1，自动退化为单列，无需手动重置对齐 - 注意别写
grid-rows-max-content—— 它会让等高完全失效
最常被忽略的点：等高只是布局层的事，子项内部内容是否对齐、是否溢出、是否留白，得靠 flex flex-col + mt-auto 或 min-h-0 单独控制，不是加个 flex 就万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
