价格数字底边对齐需用align-items: flex-end配合等宽字体，按钮沉底需用margin-top: auto配合flex-direction: column，外层卡片须设min-height并启用align-items: stretch才能实现整体视觉对齐。
价格数字和购买按钮无法视觉对齐，90% 是因为没分清“对齐目标”——价格要的是数字底边对齐（align-items: flex-end），按钮要的是在卡片内沉底（margin-top: auto），两者不能混用同一套规则。
价格数字底部对齐：用 align-items: flex-end 配合等宽字体
价格对比场景中，“¥99”和“¥1,299.00”字数不同、高度不一，但个位数必须严格水平对齐。这时不能靠 vertical-align 或手动调 margin，得让每个价格单元格的文本底边贴容器底边。
-
.price-item必须是display: flex容器，且保持默认flex-direction: row（不用改） - 子元素（如
.price-amount）必须是直接子项；如果中间套了<span>或<div>，align-items会失效 - 统一使用等宽字体（如
font-family: 'SF Mono', Consolas, monospace），并设line-height: 1、margin: 0、padding: 0，避免行高或内边距干扰基线位置 - IE10/11 需补
-ms-align-items: end，且父容器要有min-height或显式height，否则不生效
购买按钮沉底：用 margin-top: auto 而非 align-self
按钮不是要“贴着自己盒子底边”，而是要“钉在整张卡片的视觉底部”。这和价格对齐是两件事，别试图用同一个 align-items 控制两者。
-
.card或按钮直接父容器（如.card-content）必须设display: flex; flex-direction: column—— 没这句，margin-top: auto完全无效 -
margin-top: auto必须加在按钮的**直接父容器**上（比如.card-actions），而不是按钮本身 - 避免给该父容器设
height、flex-shrink: 0或overflow: hidden，否则它会拒绝吸收剩余空间 - 按钮内部若需水平排布（如“加入购物车”+“收藏”），应让
.card-actions自己成为 Flex 容器：display: flex; justify-content: center; gap: 0.5rem
外层网格拉齐卡片高度：这才是对齐的前提
即使每张卡片内部价格和按钮都各自对齐了，多卡片并列时仍看起来高低不一——问题不在按钮或价格，而在卡片自身高度不一致。Flex 不会自动让所有卡片等高，除非外层容器强制拉伸。
立即学习“前端免费学习笔记（深入）”；
- 卡片父容器（如
.card-grid）要用display: flex; flex-wrap: wrap; align-items: stretch - 每张
.card必须设min-height（如min-height: 280px），不能只靠内容撑高；否则align-items: stretch无作用 - 别用
height: 100%代替min-height，它依赖父级有明确高度，在响应式布局中极易失效 - 用浏览器开发者工具检查
.card的 computed height，确认是否真被拉齐；若仍是 content-fit，则说明min-height没生效或被覆盖
最常被忽略的点：价格对齐和按钮沉底是两个独立控制链，一个走交叉轴（align-items），一个走主轴剩余空间（margin-top: auto）。混用或漏掉任一前提（比如忘记 flex-direction: column 或没设 min-height），都会让整个对齐逻辑断掉。调试时优先检查 computed styles，而不是反复改 CSS 规则。
