flex实现等高靠align-items: stretch拉伸，但需满足：父容器有高度基准（如min-height）、子项无height/max-height/min-height、未设align-self:flex-start、flex-direction为row；box-sizing: border-box确保padding/border不破坏视觉等高。
Flex 实现等高卡片不靠“盒模型计算”，而是靠 align-items: stretch 的拉伸行为——但这个行为能否生效，取决于盒模型是否“放行”：只要卡片自身没锁死高度、父容器有可继承的高度上下文、内容没脱离文档流，等高就自动发生。
为什么加了 display: flex 还是不等高
根本不是 Flex 失效，而是它“没东西可拉伸”：
- 父容器
height是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（例如每行 3 张） - 每个
.card-row单独设display: flex和gap - 避免在整页容器上直接
flex-wrap，那是自找麻烦
真正难处理的其实是响应式断点切换时的等高重算——媒体查询里改 flex-direction 到 column 后，align-items 就不管高度了，得换用 align-content 或重新设计布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
