flex布局实现多列等高套餐卡片，关键在于父容器设flex+wrap+gap、卡片设flex-column+flex:1 1 280px、主体内容区flex:1撑满、底部元素margin-top:auto沉底，无需js或固定高度。
用 Flex 布局实现多列等高的价格套餐对比卡片，关键不是“拉高”，而是让每张卡片在**同一容器内自动对齐高度，并锚定底部元素（如按钮、价格）位置**。只要结构和 CSS 逻辑正确，不需要 JS 或固定 height，就能稳定达成视觉等高与底部对齐。
卡片容器必须设为 flex + wrap + gap
这是整个布局的基础：
- 父容器加 display: flex; flex-wrap: wrap;，启用多行弹性布局
- 用 gap: 16px; 统一控制行列间距（现代浏览器全支持，IE11 需降级用 margin 模拟）
- 禁用卡片自身的 margin（比如
margin: 8px），否则 gap 和 margin 叠加导致间距失控 - 避免在容器上设
align-items: flex-start或flex-end—— 默认stretch才是等高的前提
每张卡片设 flex-column + flex: 1 1 280px
既保证响应式宽度，又触发等高逻辑：
- flex: 1 1 280px：最小宽度 280px（移动端舒适阅读宽度），允许增长收缩，避免小屏压扁
- display: flex; flex-direction: column;：让卡片内部按垂直方向分配空间
- 不写
height、min-height、max-height—— 这些会直接打断 stretch 行为 - 加 min-width: 0; 防止长 URL 或英文单词撑破 flex 计算（尤其 Chrome/Firefox）
卡片内部用 flex: 1 锚定内容区，按钮用 margin-top: auto 沉底
这才是底部对齐的核心，比绝对定位更稳、更语义化：
- 把标题、描述等主体内容包进一个
.card-body，设 flex: 1; —— 它会撑满剩余空间，把按钮“顶”下去 - 按钮或价格区域直接加 margin-top: auto;，自动吸附到卡片底部，无论文字几行都位置一致
- 删掉
position: absolute类方案——它会让按钮脱离文档流，破坏高度计算，且需额外写position: relative父层 - 价格数字建议用大字号 + font-weight: 700 + line-height: 1，并包裹单位（如
/月）用vertical-align: super; font-size: 0.6em;
换行后跨行不等高？用 DOM 分组代替全页 flex-wrap
Flexbox 本身不支持跨行等高，flex-wrap: wrap 后每行独立拉伸。真要严格对齐，推荐结构化处理：
- 服务端或 JS 每 3 张卡片包一层
<div class="card-row"> <li> <code>.card-row设 display: flex; gap: 16px;，只管单行 - 这样每行最高卡片决定本行高度，视觉整齐度远高于整页 wrap
- 响应式断点切换列数时（如从 3 列 → 2 列 → 1 列），只需改
.card-row内卡片的flex-basis，不用重算全局高度
