父容器未设高度导致flex等高失效，因align-items: stretch需交叉轴基准；检查computed height是否为auto且接近0，临时设height测试；生产环境用min-height: 100vh或上级flex/grid限制；子项显式设height、max-height、align-self等会中断拉伸；flex-direction: column下交叉轴为水平方向，无法等高；响应式wrap下stretch仅单行生效；内容对齐需子项内部flex处理；ie11需避免min-height与align-items混用。
父容器没设高度，display: flex 就等于没写
加了 display: flex 但列还是高低不一，90% 是因为父容器的交叉轴（垂直方向）没有明确尺寸。浏览器不会凭空“猜”你要多高——align-items: stretch 必须有拉伸基准。
- 检查 computed height：用开发者工具看父容器的
height是否为auto且实际值接近 0 - 临时加
height: 400px测试，如果立刻等高，说明问题就在这儿 - 生产环境别硬写固定
height，改用min-height: 100vh或让父容器被上级 flex/grid 限制（比如flex: 1） - IE11 下
min-height不触发 stretch，可换height: 1px; min-height: 100%
子项写了 height、max-height 或 align-self，就主动退出等高队列
Flex 的等高是默认行为，不是魔法开关；任何显式覆盖都会让它失效。
-
height: 100%、max-height: 200px、min-height: 0都会中断拉伸 -
align-self: flex-start（哪怕只在一个子项上）会让它脱离 stretch 计算 - 子项用了
display: table-cell或float: left，直接脱离 flex flow，等高失效 - 图片或视频默认带
min-height: auto，加min-height: 0才能释放拉伸空间
flex-direction: column 下根本不会等高，别搞混主轴和交叉轴
想让“同一行的多列”底部对齐，必须用 flex-direction: row（默认值）。误设为 column，所有列会垂直堆叠，每列各自占满容器高度，完全不是你想要的效果。
-
flex-direction: row→ 交叉轴是垂直方向 →align-items: stretch拉伸高度 -
flex-direction: column→ 交叉轴变成水平方向 →align-items: stretch拉伸的是宽度，不是高度 - 响应式中用
flex-wrap: wrap，stretch 只在每一行内生效，跨行不拉齐；若需全列统一高度，得切到display: grid+grid-template-rows: 1fr
等高了但内容乱飘？那是内容对齐没单独处理
等高是容器层的事，内容垂直居中、底部锚定是子项内部的事。别指望拉伸后内容自动排好。
- 短内容列底部留白？在子项里加
display: flex; flex-direction: column; justify-content: center; - 按钮要“钉”在底部？子项内部用
margin-top: auto推下去，比position: absolute更稳 - 文字别用
line-height匹配容器高——动态高度下立刻失效；display: flex; align-items: center;是唯一可靠方案 - 统一
box-sizing: border-box，否则 padding/border 计算差异会导致视觉差几像素
align-items: stretch 支持有硬伤，尤其嵌套或含 min-height 时，它常直接忽略。真要兼容，得拆开写 flex-grow: 1; flex-shrink: 1; flex-basis: auto，并避免子项同时设 height 和 flex。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
