使用 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 容器能正确分配空间：
项目名称
简短描述：此处文字可能很短，也可能很长……
立即学习“前端免费学习笔记（深入）”；
✅ 优势说明：
- 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+）中稳定支持，是目前最简洁、健壮的卡片按钮定位实践。