align-items: stretch实现等高需同时满足三条件：父容器为flex且非column方向；子项无任何height/min-height/max-height声明；子项内部无overflow:hidden+height:0等干扰组合。
flex布局中align-items设为stretch时为何列高不一致
因为默认情况下，flex-item的min-height是auto，而内容高度不同会触发“最小高度约束”，导致stretch失效。不是弹性盒子没对齐，是浏览器在保护内容不被意外压缩。
-
stretch只在没有显式设置height、min-height或max-height时才生效 - 图片、
textarea、设置了line-height但没设height的文本块，都可能撑开自身容器，绕过拉伸 - 如果父容器
display: flex但子项有float或position: absolute，它就不再是flex item，align-items对其无效
用align-items: stretch实现等高必须满足的三个条件
缺一不可。很多人试了两次没效果就去搜“flex 等高 hack”，其实只是漏了其中一条。
- 父容器必须声明
display: flex或display: inline-flex，且不能是flex-direction: column（那是纵轴拉伸，不是多列等高） - 所有子项不能有
height、min-height、max-height（哪怕设成none或unset也不行，得完全不写） - 子项内部不能有
overflow: hidden+height: 0这类组合——某些CSS重置库会偷偷加，导致拉伸后内容被裁掉
当内容高度差异大时，stretch会导致文字溢出或换行异常
等高本身没问题，但视觉上可能更糟：短内容列出现大片空白，长内容列文字挤成一团甚至折行错位。这不是bug，是stretch忠实执行了“填满可用空间”的指令。
- 若内容含段落
p、列表ul等块级元素，它们的margin会在拉伸后被放大（因为flex item高度变大，但margin未重算） - 使用
font-size: clamp()或line-height: 1.5时，拉伸不会缩放文字，只会撑开行距，容易让单行标题显得松散 - 真正需要“视觉等高”的场景（比如卡片网格），建议用
align-items: flex-start+ JS监听最大高度再统一赋值，比硬拉更可控
IE11下align-items: stretch几乎不可靠
它会把min-height: auto解释成min-height: 0，导致所有列塌成一行高。不是兼容性开关问题，是渲染引擎根本没实现该行为。
立即学习“前端免费学习笔记（深入）”；
- 不能靠
@supports (align-items: stretch)检测，IE11也返回true，但实际不工作 - 替代方案只有两个：
display: table-cell（需固定列数）或用height: 100%+display: flex嵌套一层（但要求父容器有明确高度） - 如果项目必须支持IE11，别在flex等高上花时间调试，直接切到JS方案——
getBoundingClientRect().height取最大值，再style.height赋回去，反而更稳
等高布局最麻烦的从来不是怎么写，而是你没法只看一眼DOM结构就断定哪层样式在暗中阻止stretch生效。查的时候优先盯min-height和position，比反复改align-items有用得多。
