使用 css flexbox 的 `flex-direction: column` 与 `justify-content: space-between`，可让按钮始终锚定在卡片底部，无论标题和正文内容长短，实现视觉对齐。
在构建响应式卡片布局（如博客列表、项目展示页）时，常遇到按钮位置不统一的问题：当卡片内文本长度不一时，按钮会随内容浮动，导致底部参差不齐（如您截图中红线下方的错落效果）。单纯使用 position: absolute 配合 bottom: 0 虽看似直接，但需父容器显式设高且脱离文档流，易引发高度塌陷、响应失效或与其他元素重叠等问题——这正是您尝试后未生效的根本原因。
推荐采用语义清晰、兼容性好、无需固定高度的 Flexbox 垂直分布方案：
.card {
display: flex;
flex-direction: column;
justify-content: space-between; /* 关键：两端对齐，内容撑开间距 */
height: 320px; /* 可选：若需等高卡片；移除后由内容自适应，按钮仍居底 */
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
box-sizing: border-box;
}对应 HTML 结构需明确划分三部分（头部、主体、底部），确保 Flex 容器能正确分配空间：
<div class="card">
<header class="card-header">
<h3>项目名称</h3>
</header>
<main class="card-body">
<p>简短描述：此处文字可能很短，也可能很长……</p>
</main>
<footer class="card-footer">
<button class="btn btn-primary">查看详情</button>
</footer>
</div>✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- flex-direction: column 将子元素垂直堆叠；
- justify-content: space-between 强制首尾元素贴住容器上下边缘，中间内容自动拉伸填充——即使 .card-body 内容为空或极短，按钮仍稳居底部；
- 无需 position: absolute，不破坏文档流，支持响应式断点调整（如移动端可设 height: auto 并保留底部对齐）。
⚠️ 注意事项：
- 确保卡片容器有明确的高度约束（height 或 min-height），否则 space-between 在内容过少时可能使按钮上浮；推荐用 min-height: 320px 替代固定 height，兼顾弹性与对齐；
- 若卡片内含图片或动态内容，建议为 .card-header 和 .card-footer 设置 flex-shrink: 0，防止被过度压缩；
- Jekyll/Moonwalk 等静态站点中，可将上述 CSS 加入 _sass/main.scss 或主题自定义样式文件，避免内联样式影响维护性。
此方法已在现代浏览器（Chrome 29+、Firefox 20+、Safari 9+、Edge 12+）中稳定支持，是目前最简洁、健壮的卡片按钮定位实践。
