卡片底部按钮对齐失败90%因未设flex-direction: column，必须先确保卡片容器为column方向flex布局，否则margin-top: auto等操作均无效。
卡片底部按钮对齐失败，90% 是因为没设 flex-direction: column，而不是没加 margin-top: auto。这个前提不满足，后面所有操作都无效。
卡片容器必须是 column 方向的 flex 容器
Flex 默认是 flex-direction: row，此时 margin-top: auto 对按钮无效，align-self: flex-end 也只影响水平位置。只有在垂直流下，margin-top: auto 才能吸收上方空间、把元素“推到底”。
-
.card { display: flex; flex-direction: column; }是硬性前提，缺它一切归零 - 如果按钮不在
.card直接子级（比如套了.card-content或.card-body），那flex-direction: column得加在它的父容器上，而不是外层.card - 用浏览器开发者工具检查 computed styles，确认
flex-direction确实是column，别被高优先级规则覆盖
按钮不是直接子元素时，margin-top: auto 要加在它的父容器上
常见结构如：<div class="card"><div class="card-content"><h3>标题</h3><p>描述</p><div class="card-actions"><button>操作</button></div></div></div>。此时 <button> 不是 .card 的直接子项，margin-top: auto 加在 button 上完全无效。
- 正确做法：给
.card-actions加margin-top: auto（前提是它是.card-content的直接子元素） - 或者让
.card-content成为 flex 容器，并设justify-content: space-between，把标题+描述包进一个<div>，按钮单独作为最后一个子元素 - 避免多层嵌套 wrapper，每多一层，定位控制就多一重断裂风险
外层网格或 flex 容器必须统一卡片高度
即使每张卡片内部按钮都到底了，视觉上仍错位——大概率是外层容器没拉齐卡片高度。这不是按钮的问题，是卡片“基线”不一致。
立即学习“前端免费学习笔记（深入）”；
- 用
align-items: stretch（Flex 布局）或grid-template-rows: 1fr（Grid 布局），强制子项等高 - 配合
min-height更稳妥：.card { min-height: 280px; }，比固定height更容错 - 注意：如果卡片内用了
position: absolute或float，会脱离文档流，align-items: stretch失效
margin-top: auto 的生效条件和常见干扰
这个属性轻量且兼容性好，但非常“娇气”：它只在 flex 子项中生效，且不能和其它弹性拉伸行为冲突。
- 目标元素不能有
flex-grow: 1或flex: 1，否则会抢占空间，auto被忽略 - 多个按钮想一起沉底？只给最后一个加
margin-top: auto，前面的保持默认即可 - 沉底后默认左对齐，想居中或右对齐，得用
align-self: center或align-self: flex-end—— 这个必须写在按钮本身上，不是容器上
真正卡住人的地方，往往不是怎么写 CSS，而是没意识到 flex-direction: column 必须显式声明，以及没检查按钮是否真的处于 flex 容器的直接子层级。这两个点漏掉任何一个，margin-top: auto 就只是段无效代码。
