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 不会压缩它；后者也不会被“撑大”去匹配前者——它只是填满父容器交叉轴可用空间。
立即学习“前端免费学习笔记（深入）”；
若需严格视觉一致（比如卡片底部对齐），应：
- 统一子项
min-height（如min-height: 120px） - 对文字内容加
overflow: hidden+display: -webkit-box截断 - 避免子项内使用
margin-bottom: auto或绝对定位破坏拉伸
IE11 下 align-items: stretch 有兼容性陷阱
IE11 对 align-items: stretch 的实现不完整：当子项含 border 或 padding 时，拉伸高度可能不包含这些值，导致视觉上不等高。
稳妥做法是：
- 给子项统一加
box-sizing: border-box - 避免在子项上直接设
border，改用outline或伪元素模拟 - 必要时对 IE11 单独用
align-self: stretch强制单个子项
真正容易被忽略的是：等高不是目的，内容可读性和响应式容错才是。过度依赖 stretch 可能让小屏幕下文字被截断，或在动态内容加载后高度突变。留点余量，比追求像素级一致更实用。
