本文详解如何通过 display: flex + flex-direction: column + margin-top: auto 组合，将按钮稳定锚定在高度一致的卡片底部，避免因滥用 align-items 或错误设置 display 导致布局崩溃。
本文详解如何通过 display: flex + flex-direction: column + margin-top: auto 组合，将按钮稳定锚定在高度一致的卡片底部，避免因滥用 align-items 或错误设置 display 导致布局崩溃。
在响应式卡片布局中，常需确保所有卡片高度统一（如通过 min-height 或内容撑开），同时将操作按钮（如“SOURCE”）始终置于卡片底部——无论标题和描述文本长短。此时若直接对按钮使用 align-self: end，浏览器会报错：“The display: block property prevents align-items from having an effect”，这是因为 align-items 和 align-self 仅对 Flex 容器的直接子元素 生效，而按钮的父容器（.card）当前是 display: inline（非 Flex），导致该属性完全无效。
根本解法不是强行修改外层滚动容器（如 .portfolio__cards__scroll）为 Flex——这会破坏水平排列的卡片流；而是将每个 .card 自身升级为垂直方向的 Flex 容器，再利用 Flex 的自动边距特性实现底部吸附。
✅ 正确实现步骤
-
将 .card 设为垂直 Flex 容器：
设置 display: flex 和 flex-direction: column，使内部元素（、
、
用 margin-top: auto 推动按钮到底部：
在按钮上添加 margin-top: auto，Flex 布局会自动将其上方剩余空间全部分配给该 margin，从而实现“吸底”效果。这是比 align-self: flex-end 更可靠、更语义化的方案——它不依赖父容器的 align-items，且兼容 inline-block 按钮（无需强制改为 block）。保持卡片尺寸一致性：
保留原有 min-width/max-width 和 padding，并建议为 .card 显式添加 height: 100% 或 min-height（如 min-height: 320px），确保所有卡片视觉高度统一，避免因内容过少导致按钮“悬空”。
以下是优化后的 CSS 片段（已整合关键修复）：
.portfolio .portfolio__cards__scroll .card {
padding: 20px;
border-radius: 20px;
min-width: 300px;
max-width: 300px;
display: flex; /* 启用 Flex */
flex-direction: column; /* 垂直排列子元素 */
min-height: 320px; /* 可选：保障统一高度，防内容过短 */
}
.portfolio .portfolio__cards__scroll .card button {
background-color: black;
color: white;
padding: 10px 30px; /* 合并左右 padding 写法 */
border-radius: 20px;
border: none;
display: inline-block; /* 兼容内联行为，避免意外换行 */
margin-top: auto; /* 关键：推至底部 */
width: fit-content; /* 可选：防止按钮宽度撑满 */
}⚠️ 注意事项与常见误区
- 不要修改外层 .portfolio__cards__scroll 的 display：它已是 flex（用于水平滚动布局），若误加 align-items: flex-end，会导致所有卡片整体下移，破坏顶部对齐。
-
避免对 .card 使用 align-items: flex-end：这会使标题
和段落
也右对齐，违背设计意图；margin-top: auto 仅作用于按钮，精准可控。
- 慎用 height: 100%：若父容器无明确高度，height: 100% 无效；优先用 min-height 或 Flex 自适应高度。
- 响应式增强建议：在小屏幕上可改用 flex-direction: column 配合 gap，或为按钮添加 margin-top: auto 的媒体查询断点，确保移动端体验一致。
此方案简洁、健壮、符合现代 CSS 最佳实践——无需 JavaScript 计算、不依赖绝对定位、不破坏文档流，且完全向后兼容。只需两处关键 CSS 调整，即可让按钮如磁吸般稳居卡片底部，同时保持整套卡片布局的稳定性与可维护性。
