本文讲解如何通过 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 始终保持底部对齐，卡片整体呈现干净、可控、专业的一致性布局。