本文讲解如何通过 Flexbox 的 flex-direction: column 和 margin-top: auto 技巧，将按钮精准锚定在固定高度卡片的底部，同时保持所有卡片高度一致、布局稳定，无需改动父级滚动容器结构。
本文讲解如何通过 flexbox 的 `flex-direction: column` 和 `margin-top: auto` 技巧，将按钮精准锚定在固定高度卡片的底部，同时保持所有卡片高度一致、布局稳定，无需改动父级滚动容器结构。
在响应式卡片布局中，常遇到这样的需求：每个卡片（.card）内容长度不一，但希望其内部的「操作按钮」（如“SOURCE”）统一贴底对齐，且卡片视觉高度保持一致。直接对按钮使用 align-self: end 或在父元素上设置 align-items: flex-end 无效——因为 align-items 是容器属性，仅对 display: flex 或 display: grid 容器生效；而默认的块级元素（如
）是 display: block，此时 align-items 完全被忽略。
正确解法是：将 .card 自身设为垂直方向的 Flex 容器，再利用 Flex 的自动外边距（auto margin）实现“推到底部”效果。该方案侵入性极小，不干扰外层 .portfolio__cards__scroll 的水平滚动布局（它已是 display: flex），也无需引入绝对定位或 JavaScript 计算。
✅ 推荐实现方式（纯 CSS）
只需两处关键修改：
.portfolio .portfolio__cards__scroll .card {
padding: 20px;
border-radius: 20px;
min-width: 300px;
max-width: 300px;
/* 关键：启用垂直弹性布局 */
display: flex;
flex-direction: column;
/* 可选：确保卡片最小高度一致（防内容过少时塌陷） */
min-height: 320px; /* 根据实际内容调整 */
}
.portfolio .portfolio__cards__scroll .card button {
background-color: black;
color: white;
padding: 10px 30px;
border-radius: 20px;
border: none;
/* 关键：使按钮自动占据剩余空间下方位置 */
margin-top: auto;
/* 建议显式声明 display，避免 inline 元素行为差异 */
display: inline-block;
}? 原理说明：当 .card 成为 flex-column 容器后，其子元素（
、
、
⚠️ 注意事项与最佳实践
- 避免滥用 align-items: flex-end：若在 .card 上设置 align-items: flex-end，会导致所有子元素（包括标题和段落）右对齐，破坏阅读流；本方案仅移动按钮，语义清晰。
- 高度一致性建议：为防止短内容卡片高度过小，可添加 min-height（如 min-height: 320px），配合 justify-content: flex-start（默认值）确保顶部内容对齐。
-
响应式适配：在小屏幕下，可结合媒体查询调整 min-width 和 min-height，例如：
@media (max-width: 768px) { .portfolio .portfolio__cards__scroll .card { min-width: 260px; min-height: 280px; } } - 无障碍友好：按钮保留原生
✅ 总结
用 display: flex + flex-direction: column 改造卡片容器，并对目标按钮应用 margin-top: auto，是解决“按钮贴底+卡片等高”问题最简洁、标准、可维护的方案。它不依赖绝对定位（避免脱离文档流）、不修改外层滚动逻辑、不引入 JavaScript，完全符合现代 CSS 布局最佳实践。只需三行核心样式，即可优雅达成设计目标。
