flex卡片等高默认生效，失效主因是容器无高度、子项设了height/min-height、align-self覆盖或flex-direction为column；flex: 1强制等高，flex: auto则依内容高度；内部对齐需额外布局控制。
Flex卡片等高不需要额外写align-items: stretch，它本来就是默认行为；不生效的根源几乎都出在容器没高度、子项设了height/min-height，或用了align-self覆盖。
为什么加了display: flex还是不等高
不是Flex失效，是它没“东西”可拉伸——align-items: stretch只在容器交叉轴（默认垂直方向）有明确尺寸时才起作用。
- 父容器
height是auto且没被上级约束（比如没设min-height: 100vh或flex: 1），子项就只能按内容撑开 - 子项写了
height: 200px、min-height: 150px或max-height: 300px，直接覆盖stretch逻辑 - 子项显式写了
align-self: flex-start，单个项脱离拉伸队列 - 父容器
flex-direction: column，此时交叉轴变成水平方向，拉伸的是宽度，不是高度
flex: 1和flex: auto对等高的影响差别很大
在多列卡片中，flex: 1（即flex: 1 1 0%）强制所有子项从零基准开始均分空间，结果必然等高；而flex: auto（即flex: 1 1 auto）以内容自然尺寸为起点再分配，摘要短的卡片就矮。
- 用
flex: 1适合底部按钮需对齐、留白需统一的场景 - 若某列要固定宽度（如侧边栏），单独写
flex: 0 0 240px，避免它参与等高拉伸 - IE11对
flex: 1支持不稳定，可降级为flex: 1 1 0%或flex: 1 1 0px
子项内部内容不贴底？不是Flex问题，是布局责任错配
Flex让容器等高，但不负责内部元素对齐。看到按钮悬空，往往是因为用了position: absolute; bottom: 0，却忘了父项没设position: relative，或者bottom值依赖的是未拉伸前的内容高度。
- 推荐改用
display: flex; flex-direction: column+margin-top: auto把按钮推到底部 - 如果必须用绝对定位，确保父项有
position: relative，且知道此时它的高度已是拉伸后的可靠值 - 慎用
transform: translateY(-50%)做居中，它可能干扰基线计算，在flex等高中引发视觉错位
真正容易被忽略的细节
等高行为依赖父容器能“感知最高子项的高度”。如果父容器被height: 0、visibility: hidden或display: none锁死，或者子项本身被opacity: 0遮蔽但仍在文档流中，stretch就无法触发。调试时先检查父容器是否真实参与了高度计算，再看子项的align-self是否为stretch，最后确认box-sizing是否统一为border-box——padding和border不额外撑高，才是视觉齐平的基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
