align-items: stretch 默认生效但需满足前提：容器交叉轴尺寸明确、子项未设固定高度或覆盖对齐方式、flex-direction为row时才实现列等高，IE11存在兼容性缺陷。
align-items: stretch 是默认行为，不是魔法开关——它只在满足特定条件时才真正生效。直接写 display: flex 不等于自动等高，漏掉任一前提都会让列“各长各的”。
为什么加了 display: flex 还不等高？
最常被忽略的是容器高度来源：浏览器不会凭空猜你要多高，align-items: stretch 必须有明确的交叉轴尺寸作为拉伸基准。
- 父容器没设
height、min-height，也未被上层 flex 容器用flex: 1分配空间 → 拉伸无参照，视觉上“失效” - 子元素写了
height、max-height或min-height: 0→ 直接覆盖 stretch 行为 - 子元素用了
align-self: flex-start或display: table-cell→ 脱离 Flex 上下文，不参与拉伸计算 - 父容器设置了
overflow: hidden且子项有margin-bottom→ 高度被截断，看起来不等高
flex-direction: row 和 column 对等高的影响
绝大多数人想让“同一行的多列”底部对齐，该用 flex-direction: row（默认值）；误用 column 会导致所有列垂直堆叠，每列各自占满容器高度，完全失去横向布局意义。
-
flex-direction: row下，align-items: stretch让各列高度取**最高列的内容高度** -
flex-direction: column下，align-items控制的是每列内部子项的水平对齐，与列间等高无关 - 响应式中用
flex-wrap: wrap时，stretch 只在每一行内生效，跨行不拉齐
IE11 中 align-items: stretch 失效的硬伤
IE11 对 Flex 的支持存在解析缺陷，尤其在嵌套或涉及 min-height 时，stretch 常被忽略。
-
flex: 1简写在 IE11 中不稳定，建议拆成flex-grow: 1; flex-shrink: 1; flex-basis: auto - 避免对子项同时设置
height和flex，IE 会优先按height渲染 - 父容器别用
min-height替代height，可改用height: 1px; min-height: 100%这类 hack - 必要时对 IE11 单独加
display: table-cell; vertical-align: top兜底（注意 table-cell 不换行）
等高后内容溢出或留白严重怎么办？
等高是布局层的事，内容分布是子项内部的事——强行拉伸后，短内容列底部留白、长内容列文字被截断，本质是没控制好内容对齐。
立即学习“前端免费学习笔记（深入）”；
- 子项内部启用
display: flex; flex-direction: column，再用margin-top: auto把按钮/操作区“推”到底部 - 避免用
height截断内容，改用min-height+ 内部overflow: auto控制滚动区域 - 统一
box-sizing: border-box，防止padding/border导致视觉高度偏差 - 调试时临时加
outline: 1px solid red到子项，观察是否真被拉伸；再检查 computed styles 中align-self是否为stretch，以及容器height是否为具体数值而非auto
flex 简写……这些细节不逐个验证，stretch 就只是个摆设。 
