Flex等高布局需父容器有可信高度且子项不退出stretch队列：设min-height:100vh、禁用height/min-height/align-self，子项内嵌flex居中；响应式时需同步重置align-items。
Flex 实现等高布局本身是默认行为，但“内容自动居中”会干扰拉伸逻辑——两者目标冲突，必须分层处理：先确保等高成立，再在子项内部做内容对齐。
父容器必须有可信高度且未被 flex-direction 干扰
等高依赖 align-items: stretch 在交叉轴上生效，而交叉轴方向由 flex-direction 决定：
- 默认
flex-direction: row→ 交叉轴是垂直方向 →stretch拉高度（正确） - 误设
flex-direction: column→ 交叉轴变成水平方向 →stretch拉宽度，高度完全不参与等高计算 - 父容器
height是auto且所有祖先都没设高 → computed height = 0 →stretch失效
实操建议：
- 给父容器加
min-height: 100vh（比height: 100vh更稳，防 Safari 地址栏缩放抖动） - 嵌套场景下，确保上层容器也提供约束，例如外层
min-h-screen+ 中间区域flex-1 - 检查开发者工具里父容器的 computed
height，不是auto或0px才算过关
子项不能退出 stretch 队列，但可内部 flex 居中
只要子项写了以下任一声明，就会脱离等高队列，整行都会“塌”：
-
height、min-height（包括min-height: 0）、max-height -
align-self: flex-start/center/baseline -
display: table-cell、float: left、position: absolute - 图片等替换元素自带
min-height: auto，需显式加min-height: 0
正确做法是：子项保持“裸”状态（不设高度、不改对齐），然后在其内部再建一层 display: flex 做内容居中：
.item {
/* 不写 height / align-self / min-height */
}
.item > .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
注意：height: 100% 在这里安全，因为父级（即子项）已有可信高度来源（来自 stretch）。
响应式切换时 align-items 必须同步重置
小屏堆叠常用 flex-col，但很多人只改方向，忘了 align-items 的语义已变：
-
flex-direction: row时，align-items: stretch→ 控制高度 -
flex-direction: column时，align-items: stretch→ 控制宽度（此时你想要的是高度一致？它根本不负责）
所以堆叠后若仍希望视觉整齐，应显式切换对齐方式：
- 移动端堆叠：用
sm:flex-col sm:items-start或sm:items-baseline，主动放弃 stretch - 若需堆叠后某栏仍有最小高度，用
sm:min-h-64这类固定值，别依赖 stretch
切记：没有“全局等高”，只有“当前 flex 行内等高”。flex-wrap: wrap 下，换行后新行高度重新计算，和上一行无关。
内容少时视觉“矮”不是 bug，是感知问题
技术上已等高，但只有标题的栏看着空，是因为缺乏底部锚点。这不是 Flex 失效，乱加 height: 100% 或内部 flex: 1 可能导致溢出或滚动条。
- 加
padding-bottom: 1rem让底部有呼吸感 - 需要底部按钮对齐？用
::after { content: ""; flex: 1; }占满剩余空间（子项内设flex-column） - 慎用
min-height：它会把整栏撑到最小值，可能让内容被迫滚动或留白过大
真正卡住的从来不是怎么写 flex，而是父容器有没有“真高度”，以及子项有没有偷偷 align-self: flex-start 或塞了个带 min-height: auto 的图片进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
