子元素高度无法自动拉伸，需确保父容器为 display: flex 且有明确高度（如 height: 300px），同时子元素未设置固定高度、align-self 或 flex-shrink 干扰；推荐使用 flex: 1 替代 align-items: stretch 实现更可靠的拉伸效果。
子元素高度无法自动拉伸，通常是因为父容器的 display 类型或对齐方式未正确设置。默认情况下，align-items: stretch 确实会让子元素在交叉轴方向（对 Flex 容器来说是垂直方向）自动拉伸填满父容器高度——但这个行为有前提条件。
确保父容器是 flex 容器且高度明确
align-items: stretch 只在 Flex 容器中生效，且要求父容器本身有可计算的高度（不能是 height: auto 且内容未撑开）。如果父容器高度为 auto，子元素就“无处可拉”，自然不会拉伸。
- 给父容器设置明确高度，例如
height: 300px或min-height: 100vh - 确认父容器已声明
display: flex（或inline-flex） - 避免子元素设置了
flex-shrink: 0或固定高度（如height: 50px），这会覆盖拉伸行为
检查子元素是否被其他样式阻止拉伸
即使父容器设置正确，子元素自身也可能“拒绝拉伸”：
- 子元素设置了
height、max-height或min-height，会限制 stretch 效果 - 子元素设置了
align-self: flex-start等值，会覆盖父级的align-items: stretch - 子元素是替换元素（如
<img>），其固有宽高可能干扰拉伸，需加height: 100%配合
注意 flex-direction 的影响
align-items 总是作用于交叉轴：当 flex-direction: row（默认）时，交叉轴是垂直方向，stretch 拉伸高度；当 flex-direction: column 时，交叉轴变成水平方向，此时 align-items: stretch 拉伸的是宽度，而非高度。
立即学习“前端免费学习笔记（深入）”；
- 若想让子元素在列布局中拉伸高度，请改用
justify-content: stretch——但注意：justify-content 不支持 stretch 值，此时应改用align-items控制宽度，高度则靠父容器高度 +flex: 1实现 - 更稳妥的做法：对需要拉伸的子元素单独设
flex: 1，它会主动占据剩余空间
替代方案：用 flex: 1 更可靠
比起依赖 align-items: stretch，直接给子元素设置 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）往往更直观、兼容性更好，尤其在多子项场景下能自动均分可用空间。
- 单个子元素：
flex: 1即可占满父容器剩余高度 - 多个子元素：所有设
flex: 1的子项将等高拉伸 - 配合
min-height: 0可防止内容溢出时 flex 失效（常见于嵌套 flex 或含 overflow 的场景）
