如果你想让多列卡片底部的按钮整齐对齐，核心做法其实只有三步：先给外层容器设置 flex-wrap 和 align-items: stretch，保证每张卡片可以被拉伸为等高；再给每张卡片加上 flex-direction: column，并结合 min-height，先把纵向布局结构建立起来；最后再给按钮本身，或者按钮的父级容器，添加一个 margin-top: auto，这样按钮就会自然“贴”在卡片底部。
在多列价格对比卡片中，如果想让底部按钮保持统一对齐，关键并不是“强行把按钮往下拉”，而是先让所有卡片高度一致，再把内部剩余空间交给 Flex 布局自动分配，最后利用 Flex 的天然特性，把按钮顺势“推”到最底部。归根结底，核心就在三层控制：外层容器负责统一高度，卡片本身设置为纵向弹性布局，按钮则通过 margin-top: auto 稳定锚定在底部。
外层容器设为 Flex，并开启换行与拉伸对齐
价格对比卡片通常会以三列布局展示，或者根据响应式规则切换列数，因此外层容器需要支持多行排列，同时确保每张卡片在视觉上保持等高：
- 给外层容器添加
display: flex; flex-wrap: wrap;，用 Flex 布局替代传统浮动或inline-block方案 - 建议明确设置
align-items: stretch;（虽然这是默认值，但显式声明更稳妥），确保所有子卡片在交叉轴，也就是高度方向，被自动拉伸对齐 - 使用
gap: 1.5rem;统一控制卡片之间的间距，比手动添加margin更稳定，也能避免首尾多余空隙 - 尽量避免使用
justify-content: space-between搭配固定宽度卡片——这很容易让最后一行出现错位；更建议使用justify-content: center;，或保留自然留白，兼容性更好
每张卡片都要设为 column 方向的 Flex 容器
这是实现按钮底部对齐的关键前提。很多 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，容错性通常更高：
- 按钮最好是卡片的直接子元素，例如
...
...
- 给按钮添加
margin-top: auto;，它会自动占据前方剩余的主轴空间，从而自然沉到底部 - 如果按钮被包裹在
这类操作区容器中，那么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 布局流程，避免影响底部按钮定位
