flex子元素默认等高，前提是父容器设display: flex、主轴为row且无height/min-height/align-self等干扰；常见失效原因包括父容器塌陷、子项设固定高或align-self覆盖。
为什么加了 display: flex 还是不等高
不是 Flex 失效，而是 align-items: stretch 没有生效条件。它只在交叉轴（通常是垂直方向）有明确尺寸时才拉伸子项——父容器高度必须“可测量”。
- 父容器没设
height、min-height，也未被上层容器用flex: 1分配空间 → 拉伸无参照，子项按内容各自撑开 - 某个子项写了
height、max-height或min-height: 0→ 直接覆盖 stretch 行为 - 某个子项用了
align-self: flex-start或display: table-cell→ 主动退出拉伸队列 - 父容器设了
overflow: hidden且子项有margin-bottom→ 高度被视觉截断，看起来不等高
flex-direction: row 和 column 对等高的影响完全不同
绝大多数人想让“同一行的多列”底部对齐，该用 flex-direction: row（默认值）。误用 column 会导致所有子项垂直堆叠，每项占满整个容器高度，完全失去横向布局意义。
-
flex-direction: row下，align-items: stretch让各子项高度取**最高项的内容高度**，实现视觉等高 -
flex-direction: column下，交叉轴变成水平方向，align-items控制的是子项内部内容的**水平对齐**，和“列等高”无关 - 响应式中用了
flex-wrap: wrap？注意：stretch 只在每一行内生效，跨行不拉齐；如需全列统一高度，得用嵌套结构或改用 Grid
IE11 中 align-items: stretch 失效的硬伤怎么绕
IE11 对 Flex 的解析存在底层缺陷，尤其在嵌套、含 border/padding 或涉及 min-height 的场景下，stretch 常被忽略，且 flex: 1 简写也不稳定。
- 避免对子项同时写
height和flex，IE 会优先按height渲染 - 父容器别用
min-height替代height，可改用height: 1px; min-height: 100%这类 hack - 子项统一加
box-sizing: border-box，防止border/padding导致视觉偏差 - 必要时对 IE11 单独加前缀：
display: -ms-flexbox; -ms-flex-align: stretch，或降级用display: table-cell; vertical-align: top
等高后内容溢出或留白严重怎么办
等高是布局层的事，内容分布是子项内部的事。强行拉伸后，短内容列底部留白、长内容列文字被截断，本质是没控制好内容对齐，而不是 stretch 本身有问题。
- 子项内部启用
display: flex; flex-direction: column，再用margin-top: auto把按钮/操作区“推”到底部 - 避免用
height截断内容，改用min-height+ 内部overflow: auto控制滚动区域 - 统一
box-sizing: border-box，防止padding/border导致视觉高度偏差 - 真正容易被忽略的是：等高不是目的，内容可读性和响应式容错才是。小屏下文字被截断、动态加载后高度突变，比像素级不一致更致命
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
