align-items: stretch 默认生效需父容器有明确高度且子项未限制拉伸；column 方向下它控制水平对齐，撑高需 flex: 1 或 height: 100%；align-self 优先级更高，会覆盖 stretch。
为什么align-items: stretch没让子项撑满容器高度
默认情况下它确实会生效，但前提是父容器有明确高度，且子项没有设置 height、min-height 或 flex-shrink: 0 等阻止拉伸的样式。常见错误是只写了 display: flex 却忘了给父容器设高，或者子项自己锁死了高度。
- 父容器没设
height或min-height，仅靠内容撑开时，stretch实际无参照可拉 - 子项写了
height: 100px或min-height: 0，会直接覆盖 stretch 行为 - 子项用了
flex: 0 0 auto（等价于flex-shrink: 0）且内容短，也可能导致视觉上没“撑满”
align-items: stretch 在 column 方向下的表现差异
当 flex-direction: column 时，align-items 控制的是**横轴对齐**（即水平方向），而撑高行为实际由 justify-content 或子项自身尺寸决定；此时想让子项占满高度，得靠 justify-content: stretch —— 但注意：CSS Flex 中根本不存在 justify-content: stretch，这是个常见误解。真正起作用的是给子项设 height: 100% 或用 flex: 1。
-
align-items永远作用于 cross-axis：row 下是垂直方向，column 下是水平方向 - column 布局中想“撑满高度”，必须确保父容器有高度，再给子项加
flex: 1或height: 100% - 如果子项是多层嵌套，
height: 100%需要每一层父元素都有明确高度，否则失效
和 align-self 冲突时谁赢
align-self 优先级高于 align-items，只要子项显式设置了 align-self: flex-start（或 center、baseline 等），就会覆盖父容器的 stretch 设置，子项不再拉伸。
- 检查子项是否意外继承了
align-self，比如从某个 UI 组件库的默认样式里带过来 -
align-self: auto会回退到父级align-items值，这是唯一能恢复 stretch 的方式 - 调试时可用浏览器开发者工具直接看 computed 样式里的
align-self值，别只盯 CSS 规则列表
Flex 容器高度不固定时的替代方案
如果父容器高度由内容动态决定，又希望某个子项视觉上“撑满”，align-items: stretch 失效是正常的 —— 因为它没有“目标高度”可 stretch 到。这时候得换思路。
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute+inset: 0把子项钉在容器四边（需父容器position: relative） - 改用 Grid：父容器
display: grid; grid-template-rows: 1fr，子项自动占满 - 极简场景下，给子项设
margin: auto可居中并填满剩余空间（仅限单子项且父容器有高度）
真正容易被忽略的是：flex 的 stretch 不是“强制填满”，而是“在可用交叉轴空间内拉伸”。一旦那个“可用空间”本身不确定，就别硬靠它撑。
