默认行为是align-items: stretch，但仅对未设height/min-height等约束的子项生效；设固定高度、替换元素未调align-self、嵌套flex未重复设置align-items均会导致拉伸失效。
flex子项高度不一致是默认行为，不是bug
Flex容器里子项高度不同，通常是因为内容高度不同，而align-items默认值就是stretch——它本就该把子项拉满容器高度。但你看到“没拉齐”，往往不是align-items失效，而是某些子项**主动拒绝被拉伸**。
常见原因有：min-height或height设了固定值、子项内部用了display: flex但没设align-items、或者子项是img等替换元素且没设vertical-align。
-
align-items: stretch只对“块级盒”生效；如果子项是inline或inline-flex，它不工作 - 子项设置了
height或min-height（哪怕min-height: auto在某些浏览器下也干扰拉伸） - 子项内有
margin或border导致计算高度溢出，触发“收缩”逻辑
检查子项是否被height/min-height锁死
这是最常踩的坑：你写了align-items: stretch，但某个子项CSS里悄悄加了height: 200px或min-height: 100px，它就再也不听容器的话了。
实操建议：
- 用浏览器开发者工具选中子项，在“Computed”面板里搜
height和min-height，看是否被显式设置 - 临时加
height: auto !important测试是否恢复拉伸——如果恢复了，说明就是它锁的 - 替换
min-height为min-block-size（更语义化），但注意兼容性：Firefox/Chrome OK，Safari 15.4+才支持
示例：
/* ❌ 这样会阻止stretch */
.item { height: 120px; }
<p>/<em> ✅ 改成这样，允许flex拉伸 </em>/
.item { height: auto; min-height: 120px; }</p>
img或button等替换元素高度异常
img、input、button这类替换元素在flex中默认按基线对齐（align-items: baseline），即使父容器设了stretch，它们也会“站”在底部，留出下方空白，看起来像没拉齐。
- 给这些元素加
align-self: stretch强制拉伸 - 或统一设
vertical-align: top（对img有效），但注意这仅影响行内布局，flex中优先级低于align-self - 图片要拉满高度？确保没设
max-width: 100%以外的约束，且父容器高度明确（比如flex: 1或height）
示例：
.container { display: flex; align-items: stretch; }
.item img { align-self: stretch; object-fit: cover; }
嵌套flex子项内部不拉伸
如果子项自己也是display: flex，它的子元素不会自动继承外层的align-items: stretch——每个flex容器的对齐策略是独立的。
- 外层设
align-items: stretch只能控制“直接子项”的高度，不能穿透到孙子级 - 孙子级要拉伸，得在中间那层flex容器上再写一次
align-items: stretch（它默认就是，但可能被覆盖） - 特别注意：如果中间层用了
flex-direction: column，那align-items控制的是“水平对齐”，justify-content才控制垂直方向拉伸
容易忽略的一点：当子项是flex容器时，它的height必须可计算（比如父容器给了高度，或它自己设了flex: 1），否则stretch无从下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
