align-items: stretch 是 flex 布局默认值，子项自动等高；失效主因是容器无明确交叉轴高度、子项设 align-self/height 或 IE11 兼容问题。
align-items: stretch 是默认行为，不是魔法
绝大多数情况下，flex 容器里的子元素自动等高，根本不用写 align-items: stretch —— 因为它就是 flex 布局的初始值。你手动加了反而容易掩盖问题：比如某个子项设了 min-height 或 height，或用了 align-self 覆盖，结果发现“怎么不等高了”，其实是被你自己改掉了。
常见错误现象：flex 项高度参差不齐，但检查后发现父容器明明写了 align-items: stretch；真实原因是某个子项设置了 align-self: flex-start，或者内部内容触发了 min-height: auto 的计算异常。
- 确保父容器是
display: flex，且没被flex-direction: column干扰（此时align-items控制的是水平对齐） - 检查每个子项是否显式设置了
align-self，它会优先于align-items - 避免给子项设固定
height，尤其当内容高度可能超过该值时，会撑破或截断
子项内容溢出导致视觉上“不等高”
即使 align-items: stretch 生效，如果某个子项里有图片、按钮或文本块没约束尺寸，它可能把整个 flex 行拉高，而其他子项因内容少显得“矮”——其实它们物理高度一致，只是内部留白或溢出不一致，造成错觉。
使用场景：卡片布局、表单行、图标+文字并排组件。
- 给子项统一加
overflow: hidden或text-overflow: ellipsis防止文本撑开 - 图片用
max-height: 100%+object-fit: cover限制尺寸 - 避免子项内使用
margin-bottom: auto类似“吸底”技巧，它会破坏 stretch 的自然拉伸逻辑
IE11 下 stretch 行为不可靠，必须降级处理
IE11 对 align-items: stretch 的实现有严重缺陷：当子项含 min-height 或内部是 display: table 时，拉伸失效；更糟的是，它不支持 align-self 的某些值，导致 fallback 策略混乱。
性能 / 兼容性影响：强行用 JS 计算最大高度再赋值，会触发重排，且在列表滚动时卡顿。
- 优先用
display: grid替代（IE11 不支持，但现代项目已可忽略） - 若必须兼容 IE11，改用
display: table-cell+table-layout: fixed，配合vertical-align: top - 不要依赖
height: 100%在 flex 子项中生效——IE11 下它常被忽略
align-items 不起作用？先查 flex 容器的 height 是否“有定义”
stretch 的本质是让子项填满容器的交叉轴空间。如果容器自身在交叉轴方向没有明确高度（比如 height: auto 且无内容撑开），那“填满”就无从谈起，子项会按内容高度收缩。
常见错误现象：flex 行看起来全都不等高，开发者反复调 align-items 没反应；实际是父容器高度未设定，或被 max-height 截断。
- 给 flex 容器设置明确的
height或min-height（如min-height: 200px） - 若容器需自适应内容，但又希望子项等高，可改用
display: grid，其grid-template-rows: 1fr更可靠 - 慎用
flex: 1在子项上——它只影响主轴剩余空间分配，和交叉轴拉伸无关
真正难的不是写对 align-items，而是分辨清楚：当前看到的“不等高”，到底是渲染逻辑没生效，还是内容本身在干扰视觉判断，又或者浏览器根本就没按规范解析。多打开 devtools 看 computed 样式里 align-items 和 align-self 的最终值，比反复改 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
