加了display: flex卡片仍不等高，根本不是flex失效，而是“没东西可拉伸”：父容器高度为auto且无约束、子项设height/max-height/min-height、align-self覆盖、flex-direction:column导致拉伸方向错误。
为什么加了 display: flex 卡片还是不等高
根本不是 Flex 失效，而是它“没东西可拉伸”：父容器高度是 auto 且没被约束（比如没设 min-height: 100vh 或没嵌在上级 flex/grid 容器里）；某张卡片写了 height、max-height 或 min-height，直接覆盖拉伸逻辑；子项显式写了 align-self: flex-start，单个项脱离拉伸队列；父容器 flex-direction: column，此时交叉轴变成水平方向，align-items 拉伸的是宽度，不是高度。
box-sizing 和 padding 怎么悄悄破坏视觉等高
没设 box-sizing: border-box 时，padding 和 border 会额外撑高卡片——不同卡片的内边距或边框不一致，就会导致视觉上“明明拉伸了却看起来不齐”：
- 所有卡片必须统一加
box-sizing: border-box - 避免用
mb-3、pb-2等类乱加底部间距——改用gap（Flex/Grid）或g-*（Bootstrap）控制间隙 - 如果卡片含
.card-img-top，图片未设height或object-fit，加载过程中高度为 0，也会短暂破坏拉伸基准
卡片内按钮怎么始终对齐底部
文字少的卡片按钮上浮，不是高度问题，是内容没“锚定”。别用 position: absolute：
-
.card加display: flex; flex-direction: column; height: 100% -
.card-body保持正常流布局（不设height、不加position） -
.card-footer或按钮加margin-top: auto，自动吸到底部
如果必须用绝对定位，确保 .card 有 position: relative，且知道此时它的高度已是拉伸后的可靠值。
flex-wrap: wrap 换行后跨行不等高怎么办
Flex 默认只对单行子项拉伸。启用 flex-wrap: wrap 后，第二行的卡片就不再和第一行对齐——浏览器把每行当独立容器处理：
- 不要指望 CSS 自动跨行对齐，Flexbox 没这个能力
- 可靠解法是结构隔离：用 JS 或服务端按每 N 张卡片包一层新容器（如
.card-row），每组单独设display: flex - 移动端小屏建议改
flex-direction: column而非依赖wrap，避免跨行逻辑干扰
真正容易被忽略的是：哪怕所有样式都写对了，只要有一张卡片内部用了 position: absolute 的标题或按钮，它就脱离文档流、不参与高度计算——整行拉伸基准就塌了一角，而且很难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
