flex子元素默认等高，前提是父容器有明确交叉轴高度且子项未设height/min-height/align-self等干扰属性；失效主因是父容器塌陷、子项自设高度或align-self覆盖。
直接加 flex 和 items-stretch 不一定等高——关键不是类写没写，而是父容器有没有可拉伸的基准高度，以及子项有没有主动破坏 stretch 行为。
为什么加了 flex 还是不等高
浏览器需要一个交叉轴（垂直方向）的高度来源才能拉伸子项。常见失效原因：
- 父容器没显式高度：比如只是普通
div，没设min-h-screen、h-full或嵌套在flex-1区域里 → 子项只能按内容撑开 - 子项写了
h-24、min-h-32、max-h-60→ 这些会覆盖items-stretch的拉伸逻辑 - 子项用了
self-start、self-center→ 相当于align-self: flex-start，跳出了 stretch 流程 - 父容器有
overflow-hidden且子项带mb-4→ 高度被截断，视觉上像“不等高”
Flex 实现左右两栏等高的正确写法
保持 flex-row（默认），别误切 flex-col；等高靠的是父容器的 items-stretch（无需显式写，它是默认值）：
- 外层容器必须有明确高度来源：比如
min-h-screen，或嵌套在flex-1的 flex 布局中 - 两栏都不要设
height、min-height、max-height，也别加self-*类 - 若需响应式堆叠，小屏时用
sm:flex-col sm:items-start显式取消拉伸，避免留白过高 -
flex-1不是等高必需项——它只分配主轴空间，对高度拉伸无效；仅在需要“占满剩余宽度”时才用
示例结构：
<div class="flex flex-col min-h-screen"> <header></header><main class="flex-1 flex"><section class="w-64 bg-gray-100">侧边栏</section><section class="flex-1 bg-white">主内容区</section></main> </div>
Grid 方案更稳，尤其多行或卡片场景
Grid 天然支持同行内等高，且不受 flex-wrap 分行影响。适合周历、看板等需严格对齐的布局：
- 单行两栏：
grid grid-cols-2 gap-4，父容器需有grid类，且子项不能有h-full或min-h-0 - 强制所有行统一等高：
grid grid-cols-2 grid-auto-rows-fr，每行按最高项均分高度 - 移动端堆叠：
sm:grid-cols-1即可退化为单列，无需手动重置对齐方式 - 注意别写
grid-rows-max-content——它会让 stretch 完全失效
容易被忽略的滚动与响应式陷阱
想让两栏整体滚动（比如日程视图），不能给每栏单独加 overflow-y-auto：
- 正确做法：把整个
flex或grid容器包进一个固定高度的外层，并设overflow-y-auto - 响应式切换时，
sm:flex-col后若没配sm:items-start，items-stretch仍在生效——只是拉伸宽度，可能造成视觉错乱 - 左右栏内容量差异大时，用
minmax(0,1fr)替代1fr，防止中间栏撑破容器导致横向滚动
真正卡住的点往往不在“怎么写类”，而在“谁在控制高度基准”和“哪个类悄悄覆盖了 stretch”。检查 DevTools 的 Computed 面板，确认 align-items 是 stretch，且没被子项的 align-self 覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
