卡片高度不一致需检查align-items是否被覆盖，默认stretch可使子项拉伸对齐；应检查计算值、显式设置stretch、避免height干扰、用min-height防抖动、注意IE11兼容性及绝对定位预留空间。
Flex容器里卡片高度不一致？检查align-items是否被意外覆盖
默认情况下，flex容器的子项在交叉轴（通常是垂直方向）会拉伸对齐，也就是align-items: stretch——这正是让卡片高度自适应的关键。但很多人写了display: flex却没效果，往往是因为父容器或自身设置了align-items: flex-start、align-items: center，甚至某个重置CSS全局把align-items设成了baseline。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查卡片直接父容器的
align-items计算值，不是声明值 - 显式写上
align-items: stretch（虽然它是默认值，但可避免被层叠覆盖） - 确保卡片本身没有设置
height、max-height或min-height干扰拉伸 - 如果卡片内部有
position: absolute元素撑开内容，stretch仍生效；但若用了height: 100%又没给父级设高度，反而会失效
卡片内文字换行或图片加载导致高度突变？用min-height兜底防抖动
Flex的stretch是实时响应内容高度的，但网页中文字折行、图片异步加载完成、字体加载延迟等都会让卡片高度动态变化，造成视觉抖动或布局重排。这不是bug，而是特性使然。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片加
min-height: 200px（按业务内容预估一个合理最小值），防止空内容或加载中塌缩 - 图片务必加
height: auto和width: 100%，避免未加载时占位空白影响拉伸基准 - 如果卡片含富文本，用
word-break: break-word代替white-space: nowrap，否则单长单词会撑破容器 - 慎用
line-clamp截断文本——它依赖display: -webkit-box，与flex子项的渲染逻辑可能冲突
IE11兼容性下align-items: stretch失效？改用align-self: stretch逐个控制
IE11对align-items: stretch的支持不稳定，尤其当卡片内部有margin或border时，拉伸可能只作用于内容区而非整个盒模型。这不是Flex基础问题，而是IE的盒模型计算缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃全局
align-items，改为给每个卡片加align-self: stretch - 确保卡片父容器是
display: flex且flex-direction: row（IE11对column支持更差） - 移除卡片的
margin，改用父容器的gap（IE不支持）或padding模拟间距 - 如果必须支持IE11且内容高度差异大，不如退回到
display: table-cell方案——虽然语义差，但高度同步更可靠
卡片内有绝对定位按钮或徽标？需用padding-bottom预留空间防遮挡
align-items: stretch只拉伸卡片自身的高度，不影响内部position: absolute元素的定位参考。如果右上角有个position: absolute; top: 8px; right: 8px的标签，而卡片内容很短，拉伸后按钮会悬在半空，下方大片留白——看起来像“没拉伸”，其实是视觉错觉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片加
padding-bottom: 40px（略大于绝对定位元素高度），为底部操作区留出安全空间 - 绝对定位元素的
top/bottom尽量用相对单位（如top: 1rem），避免固定像素值在不同字号下错位 - 如果徽标需要始终贴右上角且不随内容滚动，确认父卡片没设
overflow: hidden，否则会被裁剪
真正难的不是让高度拉伸，而是判断哪些内容该参与拉伸、哪些该作为装饰脱离流——这得看卡片的信息层级，而不是CSS属性本身。
