align-items: stretch 是 flex 容器默认等高行为，但受子项 height/max-height、overflow/margin、绝对定位、box-sizing 不一致等因素干扰；显式声明可防覆盖并兼容旧 safari；等高仅作用于容器盒，不控制内容溢出，且依赖父容器正常参与高度计算。
align-items: stretch 是 display: flex 容器的默认行为，只要满足基本前提，等高就自动生效——不需要额外写这行 CSS，也不需要 JS 计算高度。
为什么加了 display: flex 却不等高？
最常见不是语法错，而是隐性干扰：
-
height或max-height被写死在子项上（比如.item { height: 200px; }），直接覆盖stretch - 父容器
overflow: hidden+ 子项有margin-bottom，导致视觉上被截断，误判为“不等高” - 子项内部用了
position: absolute或display: table-cell，脱离文档流后不再参与拉伸计算 - 全局
box-sizing不一致（如部分子项是border-box，部分是content-box），padding/border 算法不同，看起来高度不齐
align-items 不写也生效，但显式声明有好处
虽然默认就是 stretch，但在以下场景建议显式写出：
- 团队协作时避免被后续
align-items: flex-start覆盖（尤其在组件嵌套深、CSS 作用域不清时） - 需要兼容旧版 Safari（≤15.4）：某些嵌套 flex 中
stretch会失效，加min-height: 0到子项可兜底 - 父容器是
flex-direction: column时，align-items控制的是“水平对齐”，此时等高需换用display: grid或调整布局方向
子项内容溢出时，等高 ≠ 内容可视高度一致
等高只保证容器盒（box）拉齐，不控制内容渲染。当某列文字远多于其他列，会出现空白或滚动，这时得配合内容策略：
- 用
overflow: hidden+text-overflow: ellipsis截断单行文本（注意要加white-space: nowrap和固定宽） - 若需多行截断，用
display: -webkit-box+-webkit-line-clamp（仅 WebKit） - 纯 CSS 多行截断仍不可靠，复杂场景建议 JS 动态限制行数或服务端预处理
height: 0、visibility: hidden 或 display: none 锁死，或者子项本身被 opacity: 0 遮蔽但仍在文档流中，stretch 就无法正确触发。调试时先检查父容器是否真实参与了高度计算。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
