Flex子元素默认等高，前提是父容器设display: flex、主轴为row且无height/min-height/align-self等干扰；加align-items: stretch多余，常见失效原因包括父容器塌陷、子项设固定高或align-self覆盖。
Flex子元素默认就等高，前提是父容器是display: flex、主轴为row（或未显式设置）、且没有干扰拉伸的样式。写align-items: stretch不仅多余，还可能掩盖真实问题。
为什么加了display: flex还不等高
不是Flex没生效，而是拉伸行为被悄悄禁用了。最常踩的坑就三类：
- 父容器高度是
auto且没被撑开：比如外层是普通div，里面只有浮动/绝对定位子项，导致容器“塌陷”，stretch无高度可拉——加min-height: 1px或塞个正常流内容就能触发 - 子项自己设了
height、min-height或max-height：只要任一值存在，拉伸就中断，改用该值作为基准高度 - 子项写了
align-self: flex-start（或center、baseline）：这会覆盖父级的align-items，单个子项就“掉队”了
flex-direction: row和column对等高的影响
等高效果永远作用于交叉轴，方向一变，行为就完全不同：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 → 子项等高（你要的效果） -
flex-direction: column→ 交叉轴变成水平方向 → 此时是“等宽”，不是等高；想让子项在列方向上等高，得换回row，或者改用grid
别指望flex-direction: column+align-items: stretch能让多行卡片等高——它只管每行内子项的宽度对齐。
子项内容溢出或留白太多怎么办
等高解决的是容器盒模型高度一致，不是内容适配。常见副作用是短内容卡片底部大片空白、长内容文字被截断。应对思路不是取消等高，而是松动约束：
- 把
height全部换成min-height：允许子项随内容自然增长，同时保留“至少等高”的底线 - 子项内部若需垂直居中，别用
margin-top: auto配合position: absolute，改用嵌套一层display: flex; flex-direction: column;，再对内部元素设margin-top: auto - 如果用了
box-sizing: border-box，确保padding和border不会意外撑破计算高度；没加的话，min-height值要预留出这部分空间
真正容易被忽略的点
等高列的“高度来源”从来不由子项决定，而由父容器的交叉轴尺寸决定——这个尺寸可能是显式height，也可能是上层flex: 1分配出来的空间，甚至只是最高子项的内容高度。盯着子项调样式，不如先检查父容器的 computed height 是多少、是不是auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
