flex子项高度不统一的根源在于父容器无明确高度、子项设了min-height/height或图片未处理；需确保父容器有高度基准，子项未锁定高度，图片加align-self:stretch等适配。
Flex 子项高度不统一，不是 align-items: stretch 失效了，而是它被悄悄禁用了——90% 的图文列表问题，根子在父容器没高度、子项写了 min-height 或图片没处理。
父容器没设高度，stretch 就没拉伸基准
浏览器不会凭空猜你要多高。align-items: stretch 只能拉伸到父容器当前可用的交叉轴空间。如果父容器 height 是 auto（比如没设 min-height，也没被上层 flex: 1 撑开），那它的高度就由内容最高项决定，此时“拉伸”看起来像没起作用。
- 用开发者工具选中父容器，在 “Computed” 面板查
height值：如果是auto或接近0px，就是根源 - 临时加
min-height: 200px或height: 100vh测试，若立刻等高，说明问题在此 - 生产环境避免写死
height，改用min-height: 100vh，或让父容器被上级display: flex/display: grid限制（如flex: 1）
子项写了 min-height / height，等于主动退出等高队列
stretch 是默认行为，不是强制覆盖。只要任意一个子项写了 height、min-height 或 max-height，哪怕只有一项这么写，它就拒绝被拉伸，其他项再怎么 stretch 也对不齐。
- 检查子项是否被框架（如 Bootstrap）或重置样式（如
normalize.css）悄悄加了min-height: 1px或类似兜底 - 临时给所有子项加
min-height: 0 !important，如果立刻等高，说明就是这个锁死的 - 图文列表中别用
min-height: 200px这种固定值；改用min-height: min-content，或配合flex: 1+min-height: 0
图片是替换元素，默认不拉伸，底部会留白
<img> 是替换元素，默认按 align-items: baseline 对齐，即使父容器设了 stretch，它也会在底部留白，看起来矮一截。
- 给图片加
align-self: stretch+height: 100%+object-fit: cover - 但前提是它的直接父容器（即 flex 子项）有明确高度，比如靠
flex: 1或min-height提供基准 - 别忘了给图片父容器设
overflow: hidden，否则object-fit可能失效
文字溢出没截断，撑高卡片导致前功尽弃
长文本没做截断控制，会顶高整个子项，前面所有对齐设置都白做。
- 文字容器必须加
word-break: break-word和overflow-wrap: break-word - 需要多行省略时，不能只靠
white-space: normal+overflow: hidden+text-overflow: ellipsis—— 必须配合display: -webkit-box或现代line-clamp - 如果用了
line-clamp，确保父容器有明确高度（如height: 6em）或flex: 1，否则不生效
真正难处理的不是拉伸本身，而是图文混排时各元素渲染逻辑不同步：图片按 intrinsic size 计算、文字按 line-height 推导、按钮自带 min-height —— 它们响应 stretch 的时机和方式都不一样。调试时优先看父容器 computed height，再扫一遍子项的 min-height 和 align-self，比反复调 align-items 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
