CSS弹性盒子等高布局_自动同步多列内容高度的原理

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有用得多。