align-items: stretch 默认生效需满足条件：父容器有明确交叉轴尺寸，子元素无 height/min-height/max-height 等限制，且 align-self 为 auto/stretch；flex-direction 影响作用方向，ie11 存在兼容性问题。
加了 display: flex 还不等高，不是 Flex 失效，而是 align-items: stretch 被悄悄禁用了。
为什么父容器设了 display: flex 却没效果
因为 align-items: stretch 是默认值，但它只在“有高度可拉”的前提下才真正起作用。浏览器不会凭空猜你要多高——它需要一个明确的交叉轴尺寸作为拉伸基准。
- 父容器没设
height、min-height，也未被上层 flex 容器用flex: 1分配空间 → 拉伸无参照，视觉上“失效” - 子元素写了
height、max-height或min-height: 0→ 直接覆盖stretch行为 - 子元素用了
align-self: flex-start（比如从 UI 库继承）→ 优先级高于父级align-items，单个子项就“掉队” - 父容器是
flex-direction: column→ 此时align-items控制的是宽度，不是高度
怎么让 align-items: stretch 真正生效
关键不是加新属性，而是清除干扰项，让默认行为自然工作：
- 给父容器设明确高度：如
min-height: 100vh、height: 400px，或在嵌套中用flex: 1 - 删掉子元素所有显式的高度控制：
height、min-height、max-height—— 即使是min-height: 0也不行 - 检查子元素 computed 样式中的
align-self值，确保是auto或stretch；若看到flex-start，就得定位来源并覆盖 - 确认父容器没塌陷：比如内部全是
position: absolute或浮动元素，需加一个正常流内容或min-height: 1px触发高度计算
flex-direction: row 和 column 对等高的影响
方向一变，主轴和交叉轴就互换，align-items 的作用对象完全不同：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 → 子项等高（你要的效果） -
flex-direction: column→ 交叉轴变成水平方向 → 此时是“等宽”，不是等高；想撑高得靠justify-content或给子项加flex: 1 -
flex-wrap: wrap时，stretch只在每一行内生效，跨行不拉齐
IE11 兼容性要特别当心
IE11 对 align-items: stretch 的支持有硬伤，尤其在嵌套或涉及 min-height 时，常被忽略：
- 避免对子项同时设置
height和flex，IE 会优先按height渲染 -
flex: 1在 IE11 中不稳定，建议拆成flex-grow: 1; flex-shrink: 1; flex-basis: auto - 父容器别用
min-height替代height，可用height: 1px; min-height: 100%这类 hack - 必要时对 IE11 单独加
display: table-cell; vertical-align: top兜底（注意table-cell不换行）
最常被忽略的一点：等高只是布局层的事，内容分布得靠子项自己控制。拉伸后短内容列底部留白、长内容列文字被截断，问题不在 stretch，而在没处理好子项内部的对齐与溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
