align-items: stretch 默认生效但子项高度不一致，主因是父容器无明确高度、子项设了 min-height/height、box-sizing 为 content-box、内容撑高或被 align-self 覆盖。
align-items: stretch 是默认行为，但子项高度仍不一致？
默认情况下，align-items 的值就是 stretch，它会让 flex 子项在交叉轴（通常是垂直方向）上拉伸以填满容器高度。但如果你发现子项高度参差不齐，大概率不是 align-items 没生效，而是以下某个条件被意外触发：
- 子项设置了
min-height或height，且值小于容器高度 → 拉伸被阻断 - 子项内部有
margin、padding或border，而box-sizing是默认的content-box→ 实际占用高度超出拉伸基准 - 子项包含内容（比如文字、图片），且内容本身撑高了某一项（例如一行文字 vs 三行文字），而该子项又设置了
align-self: flex-start等覆盖值 - 父容器没有明确高度（如
height: auto且无其他约束），导致“可拉伸的空间”为 0
确保父容器有可拉伸的高度基准
flex 容器必须有明确的交叉轴尺寸，align-items: stretch 才有“拉伸到多高”的依据。常见错误是只写 display: flex，却没给容器设 height 或 min-height。
.container {
display: flex;
height: 200px; /* 必须有具体高度，或通过其他方式固定（如绝对定位、flex 上级约束） */
align-items: stretch;
}如果容器高度需自适应内容但又要统一子项高度，可用 min-height 替代 height，或让其父级成为 flex 容器并设置 flex: 1。
子项内部内容撑开高度？用 align-self + min-height 组合控制
当某些子项因文字换行、图片加载等导致自然高度变大，而你希望所有子项视觉上“对齐底边”或“统一高度”，仅靠 stretch 不够。此时可主动干预：
立即学习“前端免费学习笔记（深入）”；
- 给所有子项加
min-height: 100%（前提是父容器高度确定） - 用
align-self: flex-end让内容底部对齐，再配合padding-top视觉补白 - 若需完全等高且内容居中，推荐在子项内嵌一层
div并设display: flex; flex-direction: column; justify-content: center;
注意：min-height: 100% 在 flex 子项中有效，但 height: 100% 可能失效（百分比高度依赖父级显式高度）。
检查是否被 align-self 覆盖了 stretch 行为
单个子项可以设置 align-self 覆盖父级的 align-items。如果你在某个 div 上写了 align-self: flex-start，那它就不会被拉伸——哪怕父级是 stretch。
排查方法：在浏览器开发者工具中选中该子项，看 computed 样式里 align-self 的最终值是不是 auto（继承 stretch）还是别的值。
修复方式：
- 删掉该子项上的
align-self声明 - 或显式重置为
align-self: stretch - 或统一用
align-items: stretch+ 移除所有子项的align-self
容易被忽略的是：某些 UI 库或重置样式可能悄悄给子元素加了 align-self: auto 或 baseline，得查 computed 样式确认。
