底部按钮对齐的关键是三步：外层容器设flex-wrap与align-items:stretch确保卡片等高；每张卡片设flex-direction:column并配min-height；按钮或其父容器加margin-top:auto自然锚定底部。
多列价格对比卡片中底部按钮对齐，核心不是“把按钮往下拉”，而是让每张卡片高度一致、内部空间自动分配，再用 Flex 的自然行为把按钮“吸”到底部。关键在三层控制：外层容器统一高度、卡片自身是垂直弹性盒子、按钮靠 margin-top: auto 锚定。
外层容器设为 Flex 并启用换行与拉伸
价格卡片通常以三列（或响应式列数）呈现，外层容器需支持多行布局，同时保证所有卡片视觉等高：
- 给外层容器加
display: flex; flex-wrap: wrap;，替代浮动或 inline-block - 必须设置
align-items: stretch;（默认值，但显式声明更稳妥），确保子卡片在交叉轴（高度方向）拉伸对齐 - 用
gap: 1.5rem;统一卡片间距，比手动设 margin 更可靠、无首尾额外空隙 - 避免用
justify-content: space-between配合固定宽度卡片——容易导致最后一行错位；改用justify-content: center;或留白更安全
每张卡片设为 column 方向 Flex 容器
这是按钮能到底部的前提。很多失效案例，根源就是漏掉了这一步：
-
.price-card { display: flex; flex-direction: column; min-height: 320px; }——min-height加在卡片本身，不是内部内容区 - 不要写
height: 100%;，它依赖父容器有明确高度，在 Flex 布局中反而易被截断 - 卡片内标题、描述、价格、按钮都保持正常文档流，不加
position: absolute、不设固定height - 如果用了
.card-body这类包裹层，flex-direction: column必须加在它身上，且它要是卡片的直接子元素
按钮用 margin-top: auto 自动锚定底部
这是最轻量、最稳定的定位方式，比 align-self 或 justify-content: space-between 更容错：
立即学习“前端免费学习笔记（深入）”；
- 按钮必须是卡片的直接子元素（如
<div class="price-card"><h3>...</h3><p>...</p><button>立即购买</button></div>） - 给按钮加
margin-top: auto;，它会吃掉前面所有剩余主轴空间，自然沉到底部 - 若按钮被包在
<div class="actions">里，则margin-top: auto要加在这个.actions上，而不是按钮本身 - 避免同时设置
margin-top其他值或align-self: flex-end，它们会干扰自动吸附逻辑
按钮尺寸和文字统一增强一致性
视觉对齐不只是位置，还包括大小和基线：
- 按钮统一用
padding: 12px 24px;+font-size: 0.95rem;+line-height: 1.3;控制高度，比固定height更适应不同字号 - 务必加
box-sizing: border-box;，防止边框和内边距撑大实际尺寸 - 价格数字用大号字体、加粗、高对比色，并配
aria-label提升可访问性 - “推荐”“热门”等标签建议用
position: absolute;叠加在卡片角上，不参与 Flex 流程，避免影响按钮定位
