必须设 align-items: flex-start 实现顶部对齐；按钮沉底需 card 内 display: flex + flex-direction: column + margin-top: auto；文字溢出须用 line-clamp 截断；推荐 grid 替代 flex-wrap 解决等高问题。
卡片整体顶部对齐必须设 align-items: flex-start
移动端卡片流（flex-wrap: wrap）中，卡片默认“参差不齐”不是 bug，是 align-items: stretch 在父容器 height: auto 下失效的正常表现。直接加 align-items: flex-start 就能强制所有卡片顶部对齐，但前提是：父容器必须是纯 display: flex 上下文；卡片不能有 float、position: absolute 或脱离文档流的子元素；图片需加 max-width: 100% 和 height: auto 防撑破基准。
按钮沉底要靠 flex-direction: column + margin-top: auto
仅靠外部对齐无法解决内部按钮错位。每张卡片必须单独启用垂直 Flex：
-
.card必须显式声明display: flex; flex-direction: column;—— 缺少flex-direction: column，margin-top: auto完全无效 - 文字内容区（如
.card-body）设flex: 1，占满可用垂直空间 - 按钮或操作区作为
.card的**直接子元素**，加margin-top: auto；不要套在.actions容器里再加，那会多一层嵌套干扰 - 卡片需有高度参考：用
min-height: 240px或继承父级height，否则flex: 1无空间可分
长文本溢出必须截断，否则前面所有对齐都白做
动态内容中最隐蔽的破坏者是未限制的标题或描述——哪怕只多一行，就会顶高整张卡片，让 flex-start 和 margin-top: auto 失效。必须同步处理：
- 标题区域加
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 现代浏览器可改用
line-clamp: 2（已广泛支持），但注意 Firefox 旧版本需 fallback - 避免仅用
white-space: nowrap; text-overflow: ellipsis，它只对单行有效，多行必须靠-webkit-box或line-clamp - 如果卡片内含富文本（如 HTML 片段），CSS 截断可能失效，此时需服务端或 JS 预处理字符数
换行后跨行卡片高度不一致？别硬扛 align-content
flex-wrap: wrap 下，align-items: stretch 只作用于同一行内元素，第二行不会和第一行对齐。常见错误是加 align-content: flex-start 试图“收拢”，但它只是控制行间距，不解决行内等高。更可靠的做法：
- 放弃整页容器直接
flex-wrap，改为每3张卡片包一层.card-row，每层独立设display: flex - 或直接换用
display: grid：父容器设grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，Grid 天然同列等高，无需 hack - 若必须用 Flex 且要兼容 iOS Safari 15.6 以下，JS 补丁仍是务实选择：取当前行所有卡片
offsetHeight最大值，统一赋给该行每张卡片的min-height
实际中最容易被忽略的是：卡片父容器用了 padding 却没设 box-sizing: border-box，导致计算高度时多出边框/内边距，min-height 和 flex: 1 的行为就不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
