align-items: stretch 不让子项等高是因为父容器交叉轴无明确高度或子项禁用拉伸；它只分配已有高度，不创建高度。
align-items: stretch 为什么没让子项等高
因为父容器在交叉轴上没有明确高度，或者子项自己关掉了拉伸开关。align-items: stretch 是默认行为，但它不“造”高度，只把已有高度分给子项。如果 .container 的 computed height 是 auto 或 0px，那 stretch 就无事可做。
常见干扰项包括：
- 父容器没设
height、min-height或未被上级约束（比如没写flex: 1） - 子项写了
height、min-height或max-height（哪怕只是min-height: 0） - 子项显式设置了
align-self: flex-start，覆盖了 stretch - 子项里有
img且没加height: 100%，替换元素固有尺寸阻断拉伸
flex-direction: row 和 column 下 align-items 控制的不是同一个方向
方向一变，交叉轴就翻转：当 flex-direction: row（默认），交叉轴是垂直方向，align-items 控制的是子项高度；而当 flex-direction: column，交叉轴变成水平方向，align-items 实际控制的是子项宽度——此时想让子项“等高”，得靠 justify-content 或子项自身设 flex: 1。
容易踩的坑：
- 在 column 布局里死磕
align-items: stretch想撑高，结果发现所有子项被拉宽了 - 误以为
align-items: center能让子项在 column 布局中垂直居中，其实它只管水平居中 - 子项用了
position: absolute，彻底脱离交叉轴布局，align-items对它完全无效
align-items: center 看起来“塌陷”其实是父容器高度太小
align-items: center 不会让子项塌，它只是忠实地把子项垂直居中在父容器当前高度里。如果父容器只有 24px 高（一行文字撑开），那居中后子项就卡在顶部附近，视觉上像塌了。
调试关键点：
- 检查父容器的 computed
height，不是看样式面板写的值，而是看实际计算结果 - 嵌套 Flex 时，子 Flex 容器可能因默认
min-height: auto被抑制高度增长，加min-height: 0才能释放 - 若父容器是
position: fixed且写了top: 0; bottom: 0，部分旧版 Firefox 仍需显式加height: 100%
align-self 覆盖 align-items 后，子项高度行为会突变
align-self 是子项级开关，优先级高于父容器的 align-items。一旦某个子项写了 align-self: flex-start，它就退出 stretch 行为，不再参与等高——哪怕其他子项还在拉伸。
典型场景：
- 卡片列表中某张卡加了
align-self: flex-start，它立刻变矮，破坏整体对齐 - 用
align-self: center让单个按钮垂直居中，但该按钮若没内容撑开，就会缩成一条线（因高度由内容决定） - 子项同时设了
height: 200px和align-self: stretch，后者会被忽略——height 优先级更高
真正难调的从来不是属性名写对没写对，而是哪一层父容器悄悄锁死了高度，或者哪个子项在你没注意的地方加了一行 min-height: 100px。每次对齐失效，先看 computed styles 里的 align-self 和 height，再往上查三层父级的高度来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
