flex子元素高度不一致主因是父容器无高度、子项设height/min-height或替换元素默认基线对齐；需确保父容器有明确高度、子项未锁定高度、替换元素单独处理对齐。
Flex子元素高度不一致，不是align-items: stretch失效了，而是它被悄悄禁用了——90%的情况，问题出在父容器没高度、子项写了height或min-height、或者图片/按钮这类替换元素默认按基线对齐。
父容器没高度，stretch 就没基准可拉
浏览器不会凭空“猜”你想让子项多高。align-items: stretch只拉伸到父容器**当前可用的交叉轴空间**。如果父容器height是auto（比如没设min-height、也没被上层flex: 1撑开），那它的高度就由内容最高项决定，此时拉伸看起来像“没起作用”。
- 用开发者工具选中父容器，在“Computed”里查
height值：如果是auto或0px，就是根源 - 给父容器加
min-height: 200px、height: 100vh，或在嵌套 flex 中用flex: 1分配剩余空间 - 避免外层是普通
div却塞一堆position: absolute——父容器会塌陷，stretch直接失去作用对象
子元素写了 height / min-height，等于主动退出等高队列
align-items: stretch不是强制覆盖，而是“默认行为”。只要子项自己写了height、min-height或max-height，哪怕只有一项这么写，它就拒绝被拉伸，其他项再怎么 stretch 也对不齐。
- 临时给所有子项加
height: auto !important，如果立刻等高了，说明就是高度值锁死的 - 检查子项是否被框架（如 Bootstrap）或重置样式（如 normalize.css）悄悄加了
min-height - 图文混排时，别用
min-height: 200px这种固定值兜底；改用min-height: min-content或配合flex: 1+min-height: 0
图片、按钮、textarea 这类替换元素默认不拉伸
<img>、<button></button>、<textarea></textarea>是替换元素，默认按align-items: baseline对齐，即使父容器设了stretch，它们底部也会留白，看起来矮了一截。
- 给图片加
align-self: stretch+height: 100%+object-fit: cover，并确保其父容器（即 flex 子项）有明确高度（比如靠flex: 1） - 按钮类统一加
box-sizing: border-box+height: 100%，但前提是父容器高度可计算（不能是height: auto） - textarea 加
min-height: 0，否则内部块级渲染逻辑会阻止收缩，导致视觉错位
不想拉伸内容，只想视觉整齐？放弃 stretch，改控单个子项
当内容天然长短不一（比如一段摘要 vs 一行标签），硬拉伸会撑开文字行距、破坏阅读节奏。这时更稳妥的做法是放弃stretch，转而控制每个子项自身高度。
- 统一设
height: 0+flex: 1：让它们从零开始等比拉伸，效果比单纯stretch更稳定 - 用
display: flex; flex-direction: column; justify-content: center;+flex: 1，让内部区域自适应，内容居中 - 真要跨行/响应式下都严格等高，别硬扛 Flex —— 改用
display: grid; grid-template-rows: 1fr;，它不依赖内容，也不受min-height干扰
真正卡住的往往不是align-items本身，而是它和高度计算链里某处隐式约束的冲突。先确认父容器有没有可测量高度，再逐个排查子项是否写了height、min-height、align-self，最后看替换元素有没有被漏掉处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
