Flexbox等高是默认行为，需父容器有高度基准、子项未设height/min-height/align-self、且flex-direction为row；column方向会拉伸宽度而非高度，此时应改用Grid。
Flexbox 是目前最直接、可靠、无需 hack 的实现方式；只要父容器设 display: flex，子项默认就等高——这不是技巧，是它的基础行为。
为什么加了 display: flex 还不等高
不是 Flex 失效，而是它被你无意关掉了。关键前提有三个：
- 父容器在交叉轴（默认垂直方向）必须有可参照的高度：比如设了
min-height、height，或被上级容器限制了高度；如果父容器height: auto且内容极短，它自身高度就塌缩，子项再拉伸也“无处可拉” - 子项不能写
height、max-height或align-self: flex-start——这些都会覆盖默认的align-items: stretch - 子项内部用了
float或position: absolute不影响外层等高，但如果它们导致子项盒模型高度为 0（比如只靠绝对定位撑高），视觉上就会留白
flex-direction: column 下为什么等高失效
因为等高依赖的是“交叉轴拉伸”，而 flex-direction: column 把主轴变成垂直方向，交叉轴反而是水平的——此时 align-items: stretch 拉伸的是宽度，不是高度。
如果你真需要纵向排列且等宽（而非等高），那没问题；但要等高，请换回 row 方向，或直接改用 display: grid 配合 grid-auto-rows: 1fr。
Grid 和 Flex 在等高场景怎么选
二者都能等高，但适用结构不同：
- 两列并排、内容长度不一、希望高度一致 → 用
display: flex，一行代码搞定 - 三行六列卡片墙、要求每行内卡片等高，且跨行内容也要对齐 → 必须用
display: grid，配grid-auto-rows: minmax(0, 1fr)（Safari ≤15.4 需用此写法避 bug） - 子项里有
？它们默认min-height: auto会阻止拉伸，加一句min-height: 0就释放了
别再用 float 模拟等高
所谓“padding-bottom: 9999px; margin-bottom: -9999px”只是视觉欺骗：它让短列看起来和长列一样高，但实际 DOM 高度仍不一致，导致悬停区域错位、响应式断点下失效、边框/阴影割裂。现代项目里，这属于主动给自己埋坑。
真正容易被忽略的点是：box-sizing 不统一（有的 border-box，有的 content-box）会让视觉高度差出几像素——这不是不等高，是计算误差，检查时别白调半天 Flex 设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
