卡片高度不一致需切换容器级布局控制，flex下用flex flex-wrap items-stretch+flex-1+basis+flex-col h-full，grid下用grid-rows-minmax+line-clamp+aspect-ratio。
卡片高度不一致不是 Tailwind 类没选对，而是你还在用文档流或浮动逻辑硬扛——必须切换到容器级布局控制，否则调 min-h-64、h-full 都是徒劳。
为什么 align-items: stretch 在 Tailwind 里没效果
它只在 flex 或 grid 容器上生效，且极易被以下三点打断：
- 某张卡片写了
h-64、min-h-48或max-h-96（哪怕只是min-h-0） - 卡片内部用了
absolute定位的标题/按钮，导致内容脱离文档流、不参与高度计算 - 父容器没设明确高度上下文（如
min-h-[400px]），尤其在grid-auto-rows: 1fr下会坍缩为 0
检查方式：打开开发者工具，选中“矮卡片”，看 align-self 是否为 auto，height 和 max-height 是否为 auto。
Flex 布局下真正等高的实操写法
别只给卡片加 flex，要让所有卡片处于同一容器，并满足拉伸前提：
- 父容器加
flex flex-wrap items-stretch - 每张卡片加
flex-1 basis-[calc(33.333%-1rem)]（避免 margin 破坏宽度计算） - 卡片内部用
flex flex-col h-full，描述区加flex-1，按钮加mt-auto - 统一图片样式：
aspect-[4/3] object-cover w-full，并确保其父容器有可测量宽度
注意：flex-wrap 启用后，不同行之间不会对齐——需按每行 N 张手动包裹，例如用 <div class="flex flex-wrap"></div> 包住每行卡片，而非整个列表。
Grid 布局下靠结构压平高度的写法
用 grid 更可控，但必须放弃“靠内容撑高”的思路，转为锁定内容区域最小可用高度：
- 卡片容器加
grid grid-rows-[minmax(4rem, max-content)_minmax(6rem, max-content)_1fr_auto] gap-y-3 - 标题区加
line-clamp-2，摘要区加line-clamp-3，按钮文字统一短词（如“立即申请”） - 图片区域必须用
aspect-[4/3] overflow-hidden，不能只靠object-cover - 避免在卡片或子元素上写
h-full—— Safari 对flex+h-full的实现不稳定，改用min-h-0+flex-1
关键点：高度一致性来自 HTML 结构约束和 CSS 层级控制的配合，不是单靠一个类名。最常被忽略的是图片容器没设 aspect-ratio，以及文字截断没启用 -webkit-line-clamp。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
