flex容器中卡片视觉等高需确保子项无height限制，父容器设display:flex且不锁死高度；跨行对齐须dom分组为多行flex容器；内部按钮底部对齐用margin-top:auto而非position:absolute。
卡片整体高度不一致，怎么让它们视觉上“等高”
Flex 容器的 align-items: stretch 默认就能拉齐直接子项高度，但前提是：子项没被 height、max-height 或 min-height 锁死。常见错误是给 .card 加了 height: 300px —— 这会直接切断拉伸逻辑，卡片就“钉”在那个值上了。
实操建议：
- 父容器（如
.card-grid）必须设display: flex且推荐加flex-wrap: wrap - 每个
.card不设任何 height 相关属性，只设flex: 1 1 auto或留空（默认即可） - 如果用了
flex-wrap换行，注意：跨行卡片不会自动对齐——浏览器把每行当独立 Flex 容器处理，align-items: stretch只在行内生效 - 要跨行对齐？别指望 CSS 自动搞定，得靠 DOM 分组：把所有第一行的卡片包进一个
.row，第二行再包一个，各自设display: flex
卡片内部按钮/图标底部对齐失效
按钮上浮、图标错位，通常不是卡片高度问题，而是内容没“锚定”。用 position: absolute; bottom: 0 看似快，但父容器高度不固定时极易失效；更糟的是它让元素脱离文档流，不再参与高度计算。
实操建议：
-
.card设display: flex; flex-direction: column; height: 100% - 标题、描述等正文区域保持正常流布局，不设
height，也不加position - 按钮或图标容器加
margin-top: auto，它会自动吸到底部，且随卡片高度变化实时响应 - 若卡片内有多个区块（如标题区、地址区），想让它们跨列等高，需结构分离：把所有标题抽出来单独成行，用 Flex 控制
文字长度差异导致底部图标参差不齐
图标位置飘忽，本质是基线对齐失衡，不是定位问题。强行用 position: relative + bottom 调整，缩放或换字体时立刻露馅。
实操建议：
- 最简方案：统一所有
.card的margin-bottom（比如20px），靠一致外边距制造视觉对齐 - 更稳方案：用
justify-content: space-between配合margin-top: auto把图标推到底部，同时保证文字区域居中或顶部对齐 - 避免在
.card上设align-items: flex-end，这会干扰内部 flex 子项的垂直对齐逻辑 - 图标本身如果是
<i></i>或 SVG，确保父容器有display: flex; align-items: center，否则图标上下容易偏移
Bootstrap 卡片里按钮对不齐
Bootstrap 的 .card 默认不是 Flex 容器，.card-body 也常被误设 min-height，结果按钮浮在半空。
实操建议：
- 给
.card加display: flex; flex-direction: column; height: 100% -
min-height必须设在.card上，不能只设在.card-body，否则 Flex 无基准可依 - 正文区域（如
.card-text）用flex-grow: 1或flex: 1占满剩余空间 - 按钮加
margin-top: auto，删掉所有margin-top手动值和position: absolute - 若卡片含图标、标签等额外元素，统一用
flex-grow-1包裹主体内容区，防按钮被挤上去
flex-wrap，第二行卡片就和第一行毫无关系——这时候结构分组不是“可选优化”，而是必选项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
