本文详解如何通过 Flexbox 的 flex-direction: column 和 margin-top: auto 技巧，将按钮精准锚定在卡片底部，同时保持所有卡片高度一致、布局稳定，无需修改父级滚动容器的 display 类型。
本文详解如何通过 flexbox 的 `flex-direction: column` 和 `margin-top: auto` 技巧，将按钮精准锚定在卡片底部，同时保持所有卡片高度一致、布局稳定，无需修改父级滚动容器的 display 类型。
在构建响应式卡片式布局（如作品集展示）时，一个常见且棘手的问题是：希望每个卡片中的按钮统一停靠在底部，但又不能因内容长度差异导致卡片高度参差不齐，更不能破坏已有的水平滚动结构。你遇到的报错提示——“display: block prevents align-items from having an effect”——正是关键线索：align-items 是 Flex 容器的属性，对子元素生效；而你的 .card 当前是 display: inline（本质仍为块级流式行为），其内部按钮自然无法被 align-items: end 控制。
根本解法不是强行给 .portfolio__cards__scroll（父滚动区）加 display: flex（这会打乱横向排列逻辑），而是将每个 .card 自身升级为垂直方向的 Flex 容器，再利用 Flex 的自动外边距特性实现底部吸附。
✅ 正确实现步骤
-
将 .card 设为垂直 Flex 容器
设置 display: flex + flex-direction: column，使标题、段落、按钮按列堆叠； -
用 margin-top: auto 推动按钮到底部
在按钮上添加 margin-top: auto，Flex 会自动将其“挤”到容器末尾，且不干扰其他元素间距； -
保留按钮语义与可访问性
将按钮 display 改为 inline-block（比 inline 更可控，兼容内边距与盒模型）。
以下是推荐的 CSS 修改方案：
.portfolio .portfolio__cards__scroll .card {
padding: 20px;
border-radius: 20px;
min-width: 300px;
max-width: 300px;
display: flex; /* 启用 Flex 布局 */
flex-direction: column; /* 垂直主轴：从上到下排列 */
height: 100%; /* 确保高度占满（配合父容器需保证高度继承） */
}
.portfolio .portfolio__cards__scroll .card button {
background-color: black;
color: white;
padding: 10px 30px; /* 合并左右 padding 写法 */
border-radius: 20px;
border: none;
display: inline-block; /* 优于 inline，支持盒模型控制 */
margin-top: auto; /* 关键！自动占据剩余空间，将按钮推至底部 */
}? 为什么不用 align-self: flex-end？
align-self 控制的是交叉轴对齐（此处为水平居中/右对齐），而非主轴位置。要沿主轴（垂直方向）定位，margin-top: auto 是最简洁、无副作用的标准方案。
⚠️ 注意事项与增强建议
-
确保卡片高度一致：若卡片内容高度不同，默认会导致卡片高度不一。可在 .card 上添加 height: 380px（根据内容测算）或使用 min-height 配合 flex: 1 让中间段落弹性伸缩：
.portfolio .portfolio__cards__scroll .card p { flex: 1; /* 占据所有可用垂直空间，挤压按钮到底部 */ margin: 10px 0; /* 保持段落间距 */ } - 避免父容器意外塌陷：确认 .portfolio__cards__scroll 及其祖先元素未设置 height: 0 或 overflow: hidden 导致卡片高度被截断；
- 无障碍友好：保持
