align-items: stretch 默认生效但需满足条件：子元素未设固定交叉轴尺寸、未设非stretch的align-self、非带固有尺寸的替换元素，且父容器高度明确；否则可用flex: 1强制等高。
默认情况下，Flex 容器的子元素（flex items）在交叉轴方向（通常是垂直方向）会自动拉伸以填满容器高度，这正是 align-items: stretch 的行为 —— 它是 flex 容器的默认值。但如果你发现子元素高度不一致，往往不是因为没启用 stretch，而是某些条件“阻止”了它生效。
为什么 align-items: stretch 没起作用？
stretch 只对**没有设置固定交叉轴尺寸**的子元素生效。只要子元素满足以下任一情况，它就不会被拉伸：
- 设置了明确的
height、min-height或max-height（且值不是auto） - 设置了
align-self: flex-start/center/flex-end等非 stretch 值 - 子元素是替换元素（如
<img>），且本身有固有宽高或设置了height - 父容器未设置明确高度（如
height: auto），导致 stretch 无参考基准
如何确保子元素真正等高？
关键不是“开启 stretch”，而是**清除拉伸障碍**：
- 移除子元素的
height、min-height（除非你刻意需要最小限制） - 检查并重置
align-self：可统一写align-self: stretch，或直接不设（继承父级align-items） - 对图片等替换元素，加
height: 100%或flex: 1，并确保其父容器高度可计算 - 给 flex 容器设置一个明确的高度（如
min-height: 200px或height: 100vh），为 stretch 提供参照
更稳妥的替代方案：flex: 1
如果 stretch 行为仍不稳定（比如内容高度差异大、有 margin 干扰），可以直接让子元素“主动占满可用空间”：
立即学习“前端免费学习笔记（深入）”；
- 给所有子元素设置
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 此时它们会平分容器剩余空间，自然等高，且不受内容高度影响
- 适合卡片布局、导航栏、表单行等需要视觉对齐的场景
小技巧：用 border 或 background 快速验证
调试时，在子元素上临时加 outline: 1px solid red 或 background: rgba(0,0,0,0.1)，能直观看出是否真正等高。注意避免用 border，因为它会增加盒模型尺寸，干扰 flex 计算。
