flex子项等高需父容器在交叉轴有明确高度且子项未禁用拉伸；常见原因包括父容器高度为auto、align-items非stretch、子项设height:100%或ie11兼容问题。
加了 display: flex 却没等高，大概率是父容器在交叉轴（垂直方向）没高度可参照，或者子项自己写了 height: 100% 或 align-items: flex-start 把拉伸关掉了。
为什么 display: flex 后两列还是不等高
Flex 子项等高不是“自动发生”的，它依赖父容器在交叉轴上有明确的高度边界。如果父容器的 height 是 auto，且上级没限制它的高度（比如没设 min-height、没被 flex 或 grid 父级约束），那子项就无高度可拉伸。
- 用开发者工具检查父容器的 computed
height：如果是0px或auto且渲染为 0，就是根源 -
align-items被显式设为flex-start、center或baseline，会关闭默认的stretch行为——删掉或改回align-items: stretch - 子项写了
height: 100%，但父容器没设显式高，这个百分比会计算失败，直接删掉 - IE11 下
flex: 1拉伸不稳定，建议写成flex: 1 0 auto或加flex-basis: 0
如何让 Flex 两列真正响应式且等高
响应式 ≠ 只靠媒体查询；关键是在换行时仍保持每行内等高，并避免破坏拉伸逻辑。
- 父容器设
display: flex+flex-wrap: wrap，子项用flex: 1 1 300px（最小宽 300px，可伸缩） - 不要给子项设
float、position: absolute或display: table-cell，这些会让元素脱离 flex 流，失去 stretch 能力 - 小屏堆叠时，用
@media (max-width: 768px)改flex-direction: column，此时等高失效（因为变成单列），但这是预期行为——等高只在“并排”时有意义 - 若需小屏下也强制等高（比如卡片列表），应切到
display: grid，用grid-auto-rows: 1fr或minmax(0, 1fr)
容易被忽略的 DOM 层级干扰
即使父容器和子项都写对了，也可能因内部结构破坏 stretch 行为。
- 子项内部用了
position: absolute的元素，它脱离文档流，不影响自身高度计算，但可能让父 flex 项无法正确感知内容高度 - 子项有
overflow: hidden且内容撑出margin-bottom，会被截断，视觉上不等高（检查 computedheight和padding-box尺寸） - 子项里嵌了
display: table-cell或inline-block块，可能触发 BFC 边界，干扰 flex 的交叉轴对齐 - 父容器设了
overflow: hidden，而子项有负 margin 或大 padding，也会导致实际高度被裁切
真正可靠的等高，不靠 hack、不靠 JS、也不靠视觉欺骗——只取决于两点：父容器在交叉轴有可参照的高度，子项不主动锁死自己的高度。Flex 在一维并排场景下足够好用，但一旦涉及多行全局等高、内容不可控或需要底部对齐按钮，就得切到 Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
