用Flexbox实现图文卡片等高，关键是让父容器设display: flex并使卡片为flex项，通过align-items: stretch（默认）自动等高，卡片内用flex-column布局并用flex: 1分配剩余空间，配合图片尺寸约束与文字截断防溢出。
用 Flexbox 让图文卡片高度一致，关键不是“拉伸内容”，而是让卡片容器自身等高，并合理控制内部元素的布局行为。
给卡片容器设为 flex 项并启用对齐
确保所有卡片处于同一个 Flex 容器中（比如 .card-list），并设置：
-
父容器：添加
display: flex和flex-wrap: wrap（如需换行） -
卡片本身：默认已是 flex 项；添加
flex: 1 1 auto或固定宽度（如flex: 0 0 300px），再配合min-height防止过矮 -
等高关键：父容器设
align-items: stretch（默认值，通常不用显式写）——这样所有卡片高度会自动撑到最高项的高度
卡片内部用 flex 布局控制图文排列
单个卡片内若图片、标题、描述高度不一，会导致视觉错位。建议结构如下：
@@##@@
然后给 .card 设 display: flex; flex-direction: column;，再让 .card-body 占满剩余空间：
.card { display: flex; flex-direction: column; height: 100%; }.card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }- 图片可设
height: 160px; object-fit: cover;保持比例且不拉伸变形
避免常见踩坑
以下做法容易导致失效或布局异常：
- 卡片父容器用了
float或inline-block—— 必须统一用 Flex 布局上下文 - 卡片内部用了
height: 100%但父级没设高度 —— 改用flex: 1更可靠 - 文字过多导致卡片被撑开，破坏网格感 —— 给标题和描述加
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;限制行数 - 图片未设宽高或
max-width: 100%，造成溢出 —— 显式约束尺寸更可控
补充：纯 CSS Grid 方案（备选）
如果项目允许，Grid 更简洁：
- 父容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; - 每张卡片设
display: flex; flex-direction: column;，内部同上处理 - Grid 天然等高，无需额外对齐设置
