align-items: stretch 未让子项等高，是因为父容器无高度基准、子项存在显式 height/min-height、替换元素默认基线对齐或 box-sizing 不一致所致。
align-items: stretch 为什么没让子项等高？
它其实生效了，只是被几个常见条件悄悄禁用了。最常踩的坑是：父容器没设 height 或 min-height，导致 stretch 没有拉伸基准；或者某个子项写了 height: 200px、min-height: 120px，哪怕只有一项这么写，它就拒绝被拉伸，其他项再怎么 stretch 也对不齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中任意子项，在 “Computed” 面板里直接搜
height和min-height，看是否被显式设置（包括从继承或重置来的） - 临时给所有子项加
height: auto !important，如果立刻等高了，说明就是高度值锁死的 - 把
min-height改成min-block-size更语义化，但注意 Safari 15.4+ 才支持，生产环境慎用
图片、按钮这类替换元素高度异常怎么办？
<img>、<button>、<input> 是“替换元素”，它们默认按基线对齐（align-items: baseline），即使父容器设了 stretch，也会在底部留白，看起来像矮了一截。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
align-self: stretch+object-fit: cover，并确保其父容器（即 flex 子项）有明确高度（比如靠flex: 1或height: 100%） - 避免用
vertical-align: top—— 它在 flex 环境下优先级低于align-self，基本无效 - 按钮类元素统一加
box-sizing: border-box+height: 100%，但前提是父容器高度可计算（不能是height: auto）
不想拉伸内容，只想视觉整齐？用 height + overflow 控制
当内容天然长短不一（比如一段摘要 vs 一行标签），硬拉伸会撑开文字行距、破坏阅读节奏，这时更稳妥的做法是放弃 stretch，转而控制每个子项自身高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设统一
height: 160px（根据设计稿定值），配合overflow: hidden裁剪多余内容 - 若需保留可读性，改用
display: -webkit-box+-webkit-line-clamp: 3实现多行省略 - 慎用
min-height单独设置——它允许子项更高，仍会导致底部错位 - 滚动方案可用
overflow-y: auto，但注意滚动条宽度会挤占内容空间，建议加padding-right: 16px预留
flex: 1 比 align-items: stretch 更稳？
当内容差异大、margin/padding 干扰多，或者嵌套 flex 子项内部又设了 align-items: flex-start 时，align-items: stretch 容易失效。此时直接让子项“主动抢空间”反而更可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有子项设
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它们会平分容器剩余高度，自然等高 - 若要保留最小内容高度，改用
flex: 1; min-height: 0，强制以 flex-basis=0 为起点拉伸 - 调试时临时加
outline: 1px dashed #999到子项上，比border更安全（不参与盒模型计算）
真正容易被忽略的是 box-sizing 和 margin：即使所有样式都配对了，只要某个子项用了默认的 box-sizing: content-box，它的 padding 和 border 就会额外撑高，导致 outline 看起来错位。统一加 box-sizing: border-box 是收尾前必做的一步。
