如何通过css flexbox实现卡片等高

使用 Flexbox 可轻松实现卡片等高，只需将父容器设为 display: flex，子项会自动拉伸对齐。1. 基本结构中，card-container 作为弹性容器，card 为子项；2. 设置 display: flex 后，flex: 1 让卡片均分空间，gap 控制间距；3. 添加 flex-wrap 和媒体查询可实现响应式换行，不同屏幕下调整 flex-basis 控制每行列数；4. 核心在于 align-items: stretch 默认行为，使所有卡片高度与最高者一致，无需固定高度或 JS 计算，简洁高效且兼容性好。

使用 CSS Flexbox 实现卡片等高非常简单，关键是将父容器设置为 Flex 布局，子项（卡片）会自动拉伸到相同高度。

1. 基本结构

假设有如下 HTML 结构：

  

标题1

内容较短

  

标题2

这里的内容比较多，可能会让卡片变高，但 Flex 会自动处理高度一致。

  

标题3

中等长度内容。

2. 使用 Flexbox 设置等高卡片

只需给容器设置 display: flex，子元素默认就会在交叉轴上拉伸对齐，实现等高效果。

.card-container {
  display: flex;
  gap: 16px; /* 可选：设置卡片间距 */
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  flex: 1; /* 可选：让卡片平均分配空间 */
}

这样，无论哪个卡片内容更多，所有卡片的高度都会和最高的那个保持一致。

3. 控制换行与响应式布局

如果希望在小屏幕上换行显示，可以加上 flex-wrap：

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

再配合媒体查询控制每行数量：

@media (max-width: 768px) {
  .card {
    flex-basis: calc(50% - 16px); /* 每行两个 */
  }
}

@media (max-width: 480px) {
  .card {
    flex-basis: 100%; /* 每行一个 */
  }
}

4. 关键点说明

• Flex 容器中的子项默认 align-items: stretch，这是实现等高的核心。
• 不需要给卡片设置固定高度或 JavaScript 计算。
• 内容区域会自然撑开整个卡片，视觉上高度一致。
• 若想取消拉伸，可设置 align-items: flex-start，但会失去等高效果。

基本上就这些。用 Flexbox 实现等高卡片简洁高效，兼容性好，适合大多数布局场景。不复杂但容易忽略。