align-items: stretch是Flex默认行为，本质是子项拉伸至容器交叉轴高度而非主动等高；失效主因是父容器无明确高度或子项设height/min-height/align-self等覆盖设置。
align-items: stretch 是默认行为，不是“特意设计”的等高
Flex 容器的 align-items 默认值就是 stretch，它让子元素在交叉轴（通常是垂直方向）上拉伸，填满容器的可用空间——这看起来像“等高”，但本质是“拉伸到容器高度”，不是主动比较并统一所有子项内容高度。
也就是说，它不关心你哪个子项内容多、哪个少；它只看父容器有没有可拉伸的高度基准。如果父容器高度是 auto 且由内容撑开，那最高那个子项决定了容器高度，其余子项就跟着拉伸过去。
- 这个行为只作用于直接子元素，嵌套的 flex 或 grid 不会自动继承拉伸效果
-
stretch对替换元素（如<img>、<button>）默认无效，因为它们按基线对齐（baseline），需显式加align-self: stretch - IE10/11 对
min-height在 flex 子项上的处理有 bug，可能让stretch表现异常
父容器没高度，stretch 就没东西可拉
最常见的失效场景：父容器写了 display: flex，但没设 height、min-height，也没被上级撑出高度。此时浏览器计算出的容器高度可能是 0px 或仅够容纳内容的最小高度，stretch 拉无可拉。
用开发者工具检查父容器的 “Computed” 面板里的 height 值，如果显示 auto 且数值极小（比如 24px），基本就是这个问题。
立即学习“前端免费学习笔记（深入）”；
- 临时加
min-height: 200px看是否立刻等高，能验证是不是高度基准缺失 - 在嵌套 flex 布局中，常用
flex: 1让父容器占满剩余空间，间接提供拉伸基准 - 避免用
height: 100%而不确认父级是否有明确高度，否则会连锁失效
子元素自己“锁死”了高度，stretch 就绕不过去
只要任意一个子元素写了 height、max-height 或 min-height（哪怕只是 min-height: 0），它就退出拉伸队列——其他子项再怎么 stretch，也无法和它对齐。
特别注意：某些重置 CSS（如 normalize.css）或 UI 框架会给 <img> 加 min-height: auto，这在 Safari 中会直接禁用 stretch；<textarea> 和 <iframe> 也有固有高度逻辑，需手动设 height: 100% 才能参与拉伸。
- 用开发者工具选中子项，在 “Computed” 面板搜
height和min-height，看是否被显式设置 - 临时加
height: auto !important测试，若立刻等高，说明就是某处 height 锁死了 -
box-sizing: border-box必须统一，否则 padding/border 会挤占内容区，视觉上“不等高”
flex-wrap 后的多行布局，行与行之间互不等高
Flex 是一维布局模型。flex-wrap: wrap 只保证同一行内的子项等高，换行后的新行，高度由该行内最高子项决定——两行高度完全独立。这不是 bug，是设计如此。
如果你需要 3×3 卡片网格全部严格等高，display: flex 无法满足，必须切到 display: grid，用 grid-template-rows: 1fr 或 grid-auto-rows: minmax(0, 1fr) 才能实现二维强制等高。
- 响应式从 3 列切到 1 列时，
flex-direction: column下align-items: stretch控制的是宽度，不是高度，别混淆主轴/交叉轴 - 想模拟全等高又不愿用 Grid？只能 JS 取最大
offsetHeight再统一设min-height，但会触发重排，且断点切换时需重新计算
align-items: stretch 本身，而是它和高度计算链里某处隐式约束的冲突——先确认父容器有没有可测量高度，再逐个排查子元素是否写了 height/min-height/align-self，比反复调参数更有效。 
