本文讲解如何通过 CSS Flexbox 的 flex-grow 属性，强制所有卡片的标题容器（.card-header）高度一致，从而解决因标题长度不一导致的卡片内容错位问题，确保视觉布局整齐专业。
本文讲解如何通过 css flexbox 的 `flex-grow` 属性，强制所有卡片的标题容器（`.card-header`）高度一致，从而解决因标题长度不一导致的卡片内容错位问题，确保视觉布局整齐专业。
在构建响应式卡片网格（如旅游产品展示、服务列表或团队成员简介）时，一个常见却容易被忽视的 UI 问题就是：当某张卡片的标题过长、自动换行导致高度增加后，其余卡片的描述文字会因顶部基准线不一致而“悬浮”在不同垂直位置——这破坏了整体对齐感与专业度。
根本原因在于，默认文档流中每个 .card-header 高度由其内容决定，彼此独立；而父容器 .card-content 未设置高度约束或弹性对齐机制，无法协调子元素的纵向空间分配。
✅ 正确解法是将 .card-content 设为 垂直方向的 Flex 容器，并让 .card-header 占据可伸缩的剩余空间：
.card-content {
display: flex;
flex-direction: column;
height: 100%; /* 关键：需继承父级高度（如 .card 设置了 min-height 或固定高） */
}
.card-header {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
flex-grow: 1; /* ✅ 关键：均分可用垂直空间，强制等高 */
/* 可选增强可读性 */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}同时，为保障 height: 100% 生效，建议为 .card 添加最小高度（避免内容过少时塌陷）：
.card {
background-color: #fff;
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-height: 300px; /* 示例值，按实际内容调整 */
}⚠️ 注意事项：
- flex-grow: 1 仅在父容器有明确高度（或 min-height）且设为 display: flex 时才生效；
- 若卡片内含图片，建议为 .card-content__img img 设置 max-width: 100%; height: auto;，防止溢出；
- 如需严格限制标题行数（防极端长文本撑开布局），可配合 -webkit-line-clamp 实现多行截断（注意浏览器兼容性）；
- 不推荐使用 align-items: flex-start 或 margin-top: auto 等 hack 方式——它们无法真正同步高度，仅视觉模拟，响应式下易失效。
最终效果：无论标题是一行还是四行，所有 .card-header 区域高度自动拉齐，下方 .card-description 始终保持底部对齐，卡片整体呈现干净、可控、专业的一致性布局。
