答案：使用 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 结构：

  

    

标题1

    

内容较短

  

  

    

标题2

    

这里有一段比较长的内容，会让卡片变高……

  

CSS 设置等高

只需给父容器添加以下样式：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

.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 或固定高度。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！