如何在水平Flex布局中使多个Card的正文起始行保持一致？

要实现所有Card的正文从同一行起始，核心是让所有Card里的标题区域占据相同的垂直空间，不管标题内容长短。以下是几种实用方案：

方案一：给标题容器设置固定高度（简单直接） #

给标题区域设置固定高度，配合溢出处理，确保短标题也占据足够空间，长标题不会随意撑高容器。

/* Card容器样式 */
.card {
  display: flex;
  flex-direction: row;
  gap: 16px; /* 标题和正文的间距 */
  padding: 12px;
  border: 1px solid #eee;
}

/* 标题容器样式 */
.card-title {
  flex: 0 0 200px; /* 固定标题宽度，不拉伸不收缩 */
  height: 60px; /* 设置为最长标题所需的高度 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 限制最多显示2行，超出部分省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 正文样式 */
.card-content {
  flex: 1; /* 正文占剩余空间 */
}

优缺点：实现简单，但需要手动预估标题高度，内容变化时需调整，适合标题长度可控的场景。

方案二：使用Grid布局（推荐，自适应强） #

用Grid替代Flex布局，让标题列的高度自动匹配所有Card中最高的标题，正文自然对齐同一行。

/* 单个Card的Grid布局 */
.card {
  display: grid;
  grid-template-columns: 200px 1fr; /* 标题列固定宽度，正文列占剩余空间 */
  gap: 16px;
  padding: 12px;
  border: 1px solid #eee;
}

/* 多个Card垂直排列的父容器 */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

/* 标题可选溢出处理 */
.card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

优缺点：无需手动设置高度，自动适配最长标题，现代浏览器兼容性好，是最灵活的解决方案。

方案三：Flex布局配合min-height（折中方案） #

如果不想更换布局方式，可给标题容器设置min-height，确保短标题也占据足够空间，同时允许长标题合理撑高（需配合溢出控制）。

.card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 12px;
  border: 1px solid #eee;
}

.card-title {
  flex: 0 0 200px;
  min-height: 60px; /* 最小高度等于最长标题的高度 */
  display: flex;
  align-items: flex-start; /* 标题内容顶对齐 */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-content {
  flex: 1;
}

优缺点：比固定高度灵活，但仍需预估最小高度，适合标题长度变化不大的场景。

内容的提问来源于stack exchange，提问作者Nikhil.Nixel