Flexbox等高布局默认由align-items: stretch实现，但需父容器有明确交叉轴高度且子项未限制自身高度；常见问题包括父高未定义、子项设固定高或align-self，IE11存在border/padding兼容性问题。
align-items: stretch 是 Flexbox 等高布局的默认行为
只要父容器设为 display: flex，且子项未显式设置 height、min-height 或 align-self，子项就会自动拉伸到容器最大交叉轴尺寸——也就是“等高”。不需要额外写 align-items: stretch，因为这是初始值。
常见误区是手动加这行，反而掩盖了真正的问题：比如父容器高度未被定义（如没设 height 或内容撑不开），或子项用了 flex: 0 0 auto + 固定高度，或设置了 align-self: flex-start。
父容器必须有明确的交叉轴尺寸才能触发 stretch
Flex 子项要等高，前提是父容器在交叉轴（通常是垂直方向）上有可参考的高度。如果父容器高度由内容决定，那“等高”就失去意义——所有子项都按自身内容撑开，看起来不等高。
- 给父容器设
height、min-height或max-height - 让父容器处于一个有高度约束的上下文中（如
body有min-height: 100vh） - 避免子项用
height: 100%反向依赖父高——此时父高若未定义，100% 会计算为 0
子项内部内容溢出或 min-height 会影响视觉等高
即使 align-items: stretch 生效，子项实际渲染高度还受内部内容影响。例如一个子项含长文本而另一个只有图标，前者可能因换行变高，但 stretch 不会压缩它；后者也不会被“撑大”去匹配前者——它只是填满父容器交叉轴可用空间。
立即学习“前端免费学习笔记（深入）”；
