align-items: stretch生效需满足四前提：父容器为display: flex且未覆盖align-items；子项无height/max-height/min-height:0；父容器有可测量高度（自身设高或内容撑开）；子项align-self保持默认auto。
直接加 display: flex 就能等高，但绝大多数失效不是因为没写对，而是被隐式限制悄悄关掉了拉伸。
为什么写了 display: flex 却不等高？
这不是 Flex 不工作，而是 align-items: stretch（默认值）被以下任一条件阻断：
- 子项设置了
height、max-height或min-height: 0（尤其旧版 Safari 会因此失效） - 父容器高度为
auto且无内容撑开，同时又设了overflow: hidden—— 高度被截断，视觉上“不等高” - 子项内部用了
position: absolute或display: table-cell，脱离文档流后不再参与 stretch 计算 - CSS 重置中
box-sizing不一致，导致 padding/border 计算偏差，看起来高度不同
align-items: stretch 的生效前提有哪些？
它不是“无条件拉伸”，而是一套有依赖的自动行为：
- 父容器必须是
display: flex，且未显式覆盖align-items（比如设成flex-start） - 子项不能有固定高度约束：
height、max-height、min-height: 0都要避免 - 父容器需有可测量的高度上下文：要么自身有
height/min-height，要么由子项内容自然撑开 - 子项的
align-self保持默认（auto），否则单个项会被单独“放行”
Grid 方案比 Flex 更稳的两个场景
当 Flex 在复杂嵌套或响应式断点中开始“飘忽”时，Grid 往往更可靠：
立即学习“前端免费学习笔记（深入）”；
- 多行布局下，Flex 的
flex-wrap只保证每行内等高，跨行不联动；而 Grid 中grid-auto-rows: 1fr可强制所有行统一等高 - 需要列内容垂直居中或顶部对齐，又不想破坏等高 —— Flex 改
align-items就全崩，Grid 可用align-items: start+justify-items: center独立控制 - 响应式列数动态变化（如
repeat(auto-fit, minmax(250px, 1fr))），Grid 自动重排并维持每行内等高，Flex 需额外媒体查询和flex-basis调整
真正容易被忽略的，是那些没写在代码里却起决定性作用的“默认前提”——比如 min-height: 0 看似无害，实则在 Safari 15.6 之前会直接禁用 stretch；又比如 overflow: hidden 和 margin-bottom 共存时，父容器实际高度可能比你看到的少一行。这些细节不报错，但会让等高效果彻底消失。
