卡片等高不能只靠height:100%是因为其依赖父容器有明确高度，而流式布局中父容器高度由子项撑开，形成循环依赖；可靠解法是用flex布局配合align-items:stretch和.card-body{flex:1}实现同容器内自动等高。
卡片等高为什么不能只靠 height: 100%
因为 height: 100% 依赖父容器有明确高度，而卡片列表通常放在流式布局里，父容器高度由子项撑开——这就形成循环依赖。强行设固定高度又破坏响应性，内容溢出或留白都会出问题。
真正可靠的解法是让容器主动分配空间，而不是让子项“猜”高度。
- Flex 布局中，
align-items: stretch（默认值）会让所有 flex item 拉伸到容器最大交叉轴尺寸，前提是容器本身高度可计算（比如由最长卡片决定） - 但仅靠这个还不够：如果卡片内部文字换行、图片加载延迟、或字体渲染差异，仍可能造成视觉不等高
- 关键点在于：**等高必须发生在同一 flex 容器内**，跨多个
div或不同display: flex上下文无法自动对齐
用 display: flex 实现单行卡片等高（最常用场景）
适用于网格布局中“一行多列”的卡片组，比如 Bootstrap 的 .row + .col 组合，或 CSS Grid 替代前的 flex 实现。
.card-row {
display: flex;
gap: 1rem;
}
.card {
flex: 1;
min-width: 0; /* 防止长文本溢出破坏 flex 计算 */
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* 让内容区撑满剩余空间，保证底部对齐 */
}
-
flex: 1比flex: 1 1 0更安全，避免 Safari 对flex-basis: 0的解析偏差 - 必须加
min-width: 0，否则 Chrome/Firefox 在 flex item 内含长单词或 URL 时会拒绝收缩，导致卡片宽度失衡 -
.card-body { flex: 1 }是核心：它把卡片内容区域变成弹性区域，让标题、描述、按钮在不同卡片中自然对齐底部
多行卡片等高（Grid 更合适，但 Flex 也能做）
Flex 本身是单轴布局，多行等高需借助 display: flex + flex-wrap: wrap，但此时每行独立计算高度，无法跨行拉伸。所以实际中分两种策略：
- 若卡片数量可控（如固定 4 张），推荐用
display: grid：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，再配合align-items: stretch，天然支持跨行等高 - 若必须用 Flex，需将每行包裹为独立 flex 容器（例如用 JS 按每 3 个卡片包一层
.card-row），否则浏览器无法知道“这一行该以谁的高度为准” - 绝对不要给卡片设
height或max-height，这会切断 flex 的拉伸逻辑，且在暗色模式、缩放比例变化时极易出错
容易被忽略的兼容性与细节
Flex 等高在现代浏览器没问题，但老版本 iOS Safari（gap 和 flex: 1 组合存在渲染抖动；服务端渲染（SSR）时若卡片内容异步加载，初始 HTML 可能因高度未定导致布局跳动。
- 降级方案：用
display: table-cell+table-layout: fixed，兼容 IE10+，但语义差、响应式难控 - 防布局抖动：给卡片容器设最小高度（如
min-height: 200px），或用aspect-ratio约束图片区域 - 无障碍注意：等高本身不影响读屏器，但若用
visibility: hidden或height: 0隐藏部分内容，必须同步处理aria-hidden
最麻烦的不是写法，而是卡片内容本身的不可控性——比如富文本插入了未限制高度的 iframe，或第三方组件注入了带 position: absolute 的浮层。这种时候，flex 再稳也没用，得先收口内容渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
