align-items: stretch失效主因是卡片设了h-64/min-h-0等高度限制、内部absolute元素脱离文档流，或父容器缺明确高度上下文；需配合flex-column、aspect-ratio、line-clamp等结构化控制。
为什么 align-items: stretch 在卡片布局里没用
它只在 flex 或 grid 容器上生效，且极易被三点打断：card 上写了 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">包住每行卡片，而非整个列表
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：原始宽高比不一致会直接拉扯卡片高度，object-fit无法挽救 - 文字截断没启用
-webkit-line-clamp：仅靠max-h-20或truncate无法限制行数，多行文本仍会撑开容器
