flex无法跨行等高，因align-items: stretch仅作用于单行；小屏下需改用grid或手动分组.card-row实现每行独立拉伸，同时确保卡片无height限制、内容不脱离文档流。
Flex 本身无法跨行保证卡片等高，必须配合父容器高度约束、子项无 height 干扰、内容结构可控这三点才能在不同屏幕下稳定一致。
为什么 flex-wrap 后卡片在小屏下又不等高了
flex-direction: row + flex-wrap: wrap 时，align-items: stretch 只对同一行内的卡片生效；换行后，新行的“容器高度”由该行最高卡片决定，其他卡片再拉伸——但若该行只有一张卡片，它就按内容撑开，没参照物可拉。常见于移动端一列布局，每张卡片独占一行，stretch 彻底失效。
- 检查开发者工具里卡片的 computed
height和align-self：如果是auto却没等高，大概率是某张卡片写了min-height或内部用了position: absolute - 小屏下避免依赖
flex-wrap做多行控制，改用display: grid更稳妥，比如grid-template-columns: 1fr配grid-auto-rows: 1fr - 如果必须用 Flex，给每行手动包裹：
<div class="card-row"></div>，每个.card-row设display: flex，这样每行独立拉伸
卡片内部按钮沉底却错位，是不是 margin-top: auto 失效了
不是失效，是缺少前提条件：margin-top: auto 只在父级为 display: flex 且 flex-direction: column、同时有明确高度上下文（如 min-height 或父容器高度）时才起作用。
- 卡片必须设
display: flex; flex-direction: column; height: 100%（或min-height: 240px等具体值） - 文字区域要单独包裹，比如
<div class="card-content">，并加 <code>flex: 1占满剩余空间 - 按钮直接加
margin-top: auto，别用align-self: flex-end——后者受父级align-items控制，容易和外部 flex 行冲突 - 注意 Safari 对
height: 100%的兼容性，可加height: 0; min-height: 100%强制触发拉伸 - 标题统一用
display: -webkit-box; -webkit-line-clamp: 2;，摘要用-webkit-line-clamp: 3;，配合overflow: hidden - 图片必须包裹在固定比例容器里：
<div class="card-img" style="aspect-ratio: 4/3; overflow: hidden;"><img></div> - 避免仅靠
object-fit: cover，它不解决容器高度被原始图拉扯的问题 - 按钮文案长度要统一，别混用“查看详情”和“点击此处获取完整服务说明”
响应式中图片和文字长度差异大，怎么避免“假不等高”
卡片物理高度一致，但视觉上仍感觉错位，90% 是因为文本溢出方式不统一：有的标题两行就截断，有的三行才省略；图片宽高比不一致导致容器高度浮动。
真正难的不是写对那几行 CSS，而是把卡片从“内容驱动高度”切换到“结构驱动高度”——这意味着 HTML 层面就得约定好图片容器、标题行数、摘要长度和按钮文字。样式只是执行者，结构才是地基。
