本文介绍一种纯 css flexbox 方案，通过合理设置容器高度、弹性布局与自动外边距，使多张卡片中的标题、描述和按钮在不同内容长度下仍保持垂直对齐，无需子网格或 javascript。
本文介绍一种纯 css flexbox 方案，通过合理设置容器高度、弹性布局与自动外边距，使多张卡片中的标题、描述和按钮在不同内容长度下仍保持垂直对齐，无需子网格或 javascript。
在响应式卡片布局（如 Swiper 轮播）中，当卡片内标题长度不一，而描述和按钮又采用常规流式布局时，极易出现底部按钮错位问题——这是前端开发中典型的“基线对齐失效”场景。核心矛盾在于：各卡片 .info 区域高度随标题行数动态变化，导致其内部子元素无法跨卡片统一锚定。
解决的关键不是强行固定标题高度（牺牲可访问性与响应性），而是构建一个自适应的弹性容器结构，让按钮始终“吸附”到卡片底部，同时保证标题与描述自然居中展开。以下是经过验证的完整方案：
✅ 推荐 CSS 实现（兼容现代浏览器）
/* 确保轮播容器具备明确高度上下文 */
.swiper-container {
display: flex;
align-items: center; /* 垂直居中整体轮播区域（可选） */
height: 100vh; /* 或根据业务设为 min-height: 600px */
}
/* 水平分布卡片，并确保每张卡片底部对齐 */
.swiper-wrapper {
display: flex;
justify-content: space-around;
align-items: flex-end; /* 关键！让所有 .box 底部对齐 */
width: 100%;
height: 100%;
padding: 2rem 0;
}
/* 每张卡片启用列向弹性布局 */
.box {
display: flex;
flex-direction: column;
width: 280px; /* 可设为 max-width 或响应式值 */
margin: 0 0.5rem;
}
/* info 区域占据剩余空间，并自身也用 flex 布局 */
.info {
display: flex;
flex-direction: column;
flex: 1; /* 关键：撑满 .box 剩余高度 */
padding: 1.25rem 1rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* 标题与描述自然流式排列 */
.info .title,
.info p:first-of-type:not(.title) {
margin: 0 0 0.75rem 0;
font-weight: 600;
line-height: 1.4;
}
/* 按钮自动推至底部 */
.btn {
margin-top: auto; /* 最关键的一行：利用 flex 的自动外边距特性 */
text-align: center;
}
.btn a {
display: inline-block;
padding: 0.625rem 1.5rem;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 0.875rem;
transition: background-color 0.2s;
}
.btn a:hover {
background-color: #0056b3;
}⚠️ 注意事项与最佳实践
- 避免 height: 100% 滥用：.swiper-slide 和 .info 不应盲目设 height: 100%，这在无明确父级高度时会失效；优先使用 flex: 1 配合 display: flex 容器。
- 图片需约束尺寸：建议为 .img img 设置 width: 100%; height: auto; object-fit: cover;，防止拉伸变形，同时配合 .img { height: 160px; } 统一图区高度。
- 响应式增强：在小屏下改用 flex-direction: column + align-items: center，并移除 align-items: flex-end，避免卡片过窄时错位。
- 无障碍补充：为 .title 使用语义化 <h3> 替代 <div class="title"><p>，提升屏幕阅读器体验。
该方案已在 Chrome、Firefox、Safari 及 Edge（v90+）中稳定运行，不依赖 CSS Subgrid（兼容性仍有限），也无需 JS 计算高度，真正实现简洁、健壮、可维护的卡片对齐效果。
