align-items: stretch 失效主因是子项存在 height/min-height/max-height、align-self 非 stretch、flex: none 或替换元素未处理；解决需统一设 min-height: 0 并调整 img/button 等显示与对齐。
flex 容器里子项高度不一致，align-items: stretch 没生效？
默认情况下 align-items: stretch 确实会让 flex 项目在交叉轴（通常是垂直方向）上拉伸填满容器高度，但前提是：子项没有设置 height、min-height、max-height，且内容没触发“收缩”行为。常见失效场景包括：img 默认是 vertical-align: baseline，button 或 input 有浏览器默认 box-sizing 和内边距，还有子项用了 flex: none 或 align-self: flex-start。
检查子项是否被显式限制了高度
只要任意一个子项设置了以下任一属性，align-items: stretch 就会失效：
-
height（固定值或100%） -
min-height（哪怕只是min-height: auto） max-heightalign-self: flex-start | center | flex-end | baseline-
flex: none或flex: 0 0 auto
尤其注意 CSS 框架（如 Bootstrap）或重置样式表可能悄悄加了 min-height: 0 到 button、textarea 上 —— 这个值足以阻止拉伸。
用 min-height: 0 主动破除“最小高度保护”
现代浏览器中，flex 项目默认有 min-height: auto（即内容决定最小高度），这反而会卡住拉伸。解决方案是在所有需要统一高度的子项上显式覆盖：
立即学习“前端免费学习笔记（深入）”；
.flex-item {
min-height: 0;
}
这个技巧比设 height: 100% 更安全，不会破坏响应性，也避免因父容器高度未定义导致的渲染异常。如果子项内部还有 flex 容器，同样要给它加 min-height: 0，否则内层 flex 的拉伸也会被外层阻断。
图片、按钮等替换元素需额外处理
像 <img>、<button> 这类替换元素（replaced elements）自带固有尺寸和对齐逻辑，即使加了 min-height: 0，也可能因 vertical-align 或 line-height 导致基线错位，视觉上高度仍不一致：
- 给
img加display: block或vertical-align: top - 给
button或input加box-sizing: border-box+height: 100%（仅当父容器高度明确时） - 避免在 flex 项目内使用
line-height控制高度，改用 padding
真正起效的组合往往是：align-items: stretch + min-height: 0 + 替换元素的 display 调整。
最容易被忽略的是嵌套 flex 容器里子项的 min-height 继承问题 —— 外层拉伸了，内层却因为没设 min-height: 0 而卡住内容高度，结果看起来还是参差不齐。
