答案：使用 Flexbox 可轻松实现等高卡片，只需将父容器设为 display: flex，子卡片会自动拉伸至相同高度。通过 .card-container { display: flex; gap: 1rem; } 启用弹性布局并设置间距，.card { flex: 1; } 使子项均分空间且等高，高度由最高卡片决定。默认 align-items: stretch 实现垂直拉伸，若需取消可设 align-items: flex-start。响应式场景下，配合媒体查询设置 flex-direction: column 可在小屏堆叠，仍保持等高特性。整个方案无需 JavaScript 或固定高度，简洁高效。
使用 Flexbox 制作等高卡片非常简单，关键是将父容器设置为 display: flex，这样所有子项（卡片）会自动拉伸到相同高度。
基本结构
假设你有如下 HTML 结构：
<div class="card-container"><div class="card">
<h3>标题1</h3>
<p>内容较短</p>
</div>
<div class="card">
<h3>标题2</h3>
<p>这里有一段比较长的内容，会让卡片变高……</p>
</div>
</div>
CSS 设置等高
只需给父容器添加以下样式：
.card-container {display: flex;
gap: 1rem;
}
.card {
border: 1px solid #ddd;
padding: 1rem;
flex: 1;
}
此时两个 .card 元素会自动等高，高度由最高的那个决定。
立即学习“前端免费学习笔记（深入）”；
关键点说明
- display: flex 启用弹性布局，子元素默认沿主轴排列且 cross-axis 上拉伸
- 子元素在交叉轴（默认是垂直方向）上自动 stretch，实现等高
- 如果不想自动拉伸，可以设置 align-items: flex-start 关闭等高
- 使用 gap 添加卡片间距更方便，无需额外 margin
响应式处理（可选）
在小屏幕上希望卡片垂直堆叠时，可以加媒体查询：
@media (max-width: 768px) {.card-container {
flex-direction: column;
}
}
即使方向改变，flex 的等高特性依然有效。
基本上就这些。Flex 布局天生支持等高列，不需要 JavaScript 或固定高度。
