卡片按钮靠底失效90%因未设flex-direction: column；需在按钮直接父容器设display: flex和flex-direction: column，并用margin-top: auto推按钮，外层网格用align-items: stretch拉齐高度。
卡片容器必须设为 flex-direction: column
按钮靠底失效，90% 是因为没写这行 CSS。Flex 默认主轴是水平方向（row），此时 margin-top: auto 或 align-self: flex-end 都不会把按钮往下推——它只在垂直流中起作用。
必须显式声明：.card { display: flex; flex-direction: column; }
且这个规则不能被更高优先级样式覆盖。用浏览器开发者工具检查 computed styles，确认 flex-direction 确实是 column，而不是被重置或继承错。
- 如果按钮嵌套在
.card-body里，那flex-direction: column得加在.card-body上，不是外层.card - 别依赖
height: 100%来“撑高”容器——它需要父级有明确高度，而卡片通常放在网格中，更稳妥的是用min-height - 避免给卡片设
position: relative后再对按钮用position: absolute; bottom: 0——这会脱离文档流，导致卡片自身高度塌缩，尤其内容少时明显
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-actions 是 .card-content 的直接子项，且 .card-content 已启用 display: flex; flex-direction: column。
- 如果
.card-content内还有图片、图标等其他元素，建议把正文（标题+描述）包进一个<div class="card-text">，让.card-actions和它并列作为.card-content的两个 flex item - 别给
.card-actions设height或flex-shrink: 0，否则它会拒绝收缩，阻断空间吸收 - 按钮本身不要设
margin调位置——用gap或justify-content控制按钮间距更稳定
多卡片网格中按钮视觉对齐失败，问题不在按钮而在外层容器
即使每张卡片内部按钮都到底了，看起来还是高低不一，大概率是外层网格没拉齐卡片高度。这不是按钮的问题，是卡片“基线”不一致。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
解决方案：.cards-grid { display: flex; align-items: stretch; gap: 1rem; }.card { min-height: 280px; }（数值按业务内容调整）
-
align-items: stretch是关键，它会让所有卡片子项（即每张.card）高度拉齐到最高那个 -
min-height必须设在.card上，不是.card-body——后者高度由内容决定，无法参与 stretch 计算 - 若用 Bootstrap，确保
.card有d-flex，.card-body有d-flex flex-column，再配合min-height才生效 - iOS Safari 对
min-height在 flex 容器中的解析偶有偏差，建议加height: 0或flex-basis: 0辅助触发
价格和按钮共存时，用 flex-grow: 1 分配剩余空间
当卡片里既有价格标签又有购买按钮，且都要锚定底部时，不能全靠 margin-top: auto——它只能推最后一个元素。更稳的做法是让中间内容区域“吸走”所有剩余空间。
立即学习“前端免费学习笔记（深入）”；
结构示例：
<div class="card"><br>
<img src="..."><br>
<div class="card-content"><br>
<h3>商品名</h3><br>
<p>简短描述</p><br>
<div class="card-footer"><br>
<span class="price">¥299</span><br>
<button>购买</button><br>
</div><br>
</div><br>
</div>
-
.card-content { display: flex; flex-direction: column; flex: 1; }—— 这样它会撑满卡片剩余高度 -
.card-footer { margin-top: auto; }—— 把价格和按钮整体推到底 - 如果价格和按钮需左右分离，
.card-footer再设display: flex; justify-content: space-between; - 避免给
.price或button单独设margin，会干扰margin-top: auto的计算逻辑
min-height 值是否匹配内容预期——太小会导致文字溢出，太大又浪费空间；还有就是多层 wrapper 导致 margin-top: auto 作用链断裂，这时得一层层查 computed styles，而不是凭感觉调样式。 
