align-items: stretch 未使卡片高度一致，是因为父容器缺少显式高度、子项存在 height/min-height/flex-shrink: 0 等限制，或内容撑开导致拉伸失效；需同时满足容器有高度、子项可伸缩、无收缩禁用才生效。
为什么 align-items: stretch 没让卡片高度一致
默认情况下，align-items: stretch 确实会让 flex 项目在交叉轴（通常是垂直方向）拉伸填满容器高度，但前提是：父容器有明确高度，且子项没设置 min-height、height 或 flex-shrink: 0 类似限制。实际中卡片内容长度不一，内部元素（如标题、描述、图片）可能触发最小高度撑开，或 overflow 行为干扰拉伸，导致视觉上“高度不齐”。
确保父容器和子项都满足拉伸条件
必须同时满足以下三点，align-items: stretch 才真正生效：
- 父容器设为
display: flex且flex-direction: row（水平排列卡片） - 父容器**不能是
height: auto的无约束高度**——需显式设min-height或height，或用align-items: stretch配合flex-wrap: wrap时，确保整行卡片被同一 flex 容器包裹 - 子项（卡片）不能有
height、max-height、flex-shrink: 0（除非你真想禁掉收缩），且min-height不宜过大（比如设成100px会阻止拉伸到更高）
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
min-height: 300px; /* 关键：给容器一个可参考的高度 */
align-items: stretch;
}
.card {
flex: 1 1 250px; / 允许伸缩，基础宽度 250px /
/ 不要写 height: 100%; 或 min-height: 400px; /
}
内容高度不一致时的兜底方案：用 height: 0 + min-height
当卡片内文字行数差异大，单纯靠 stretch 仍可能因字体渲染、行高计算误差导致像素级偏差，更稳妥的做法是：让卡片自身高度由内容驱动，但强制所有卡片“视觉上对齐底部”。这时放弃 stretch，改用 flex: 1 配合 height: 0 和 min-height 触发 flex 分配逻辑：
-
height: 0让 flex 布局忽略原始内容高度，转而按剩余空间均分 -
min-height保证卡片至少能容纳基本内容，避免压缩过度 - 卡片内部用
display: flex; flex-direction: column;+margin-top: auto把按钮/操作区钉到底部
.card {
flex: 1;
height: 0; /* 关键：重置高度计算基准 */
min-height: 200px;
display: flex;
flex-direction: column;
}
.card-content {
flex: 1;
}
.card-footer {
margin-top: auto; / 推到底部 /
}
注意 Grid 比 Flex 更适合等高卡片场景
如果目标只是“多列等高卡片”，display: grid 天然支持行高对齐，无需 hack：
立即学习“前端免费学习笔记（深入）”；
- 不用管容器高度是否明确，grid 会自动让同 `grid-row` 的项目等高
-
grid-template-rows: 1fr可让每行卡片高度一致；grid-auto-rows: minmax(200px, auto)更灵活 - 兼容性已很好（Chrome 57+/Firefox 52+/Safari 10.1+），IE 不在考虑范围内时优先选它
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
grid-auto-rows: minmax(200px, auto); /* 每行卡片最小 200px，内容多则自适应撑高 */
}真正卡住的点往往不是 align-items 写错了，而是父容器高度不可控，或子项偷偷加了 flex-shrink: 0 / overflow: hidden / 图片未设 height: auto 导致布局塌陷。先检查 computed styles 里卡片的实际 flex-basis 和 height 值，比反复调 align-items 更快定位问题。
