Flex子元素高度不统一主因是align-items: stretch在存在height/min-height、绝对定位或display: flex等干扰时失效；解决需保持flex-direction: row、清除交叉轴尺寸限制、统一box-sizing及padding/border，并可采用height: 0 + flex: 1强制等比拉伸。
Flex 布局中子元素高度不统一，通常是因为默认的 align-items: stretch 在某些条件下失效，或子元素设置了固定高度、最小高度、内边距、边框等干扰了拉伸行为。解决核心在于明确主轴与交叉轴方向，并合理控制子项在交叉轴（通常是垂直方向）上的对齐和尺寸行为。
确认 flex 容器的交叉轴方向
Flex 默认是 flex-direction: row，此时交叉轴为垂直方向，align-items 控制的就是子项的高度对齐方式。若改成了 column，交叉轴就变成水平方向，align-items 控制的是宽度——这点容易被忽略。
- 保持
flex-direction: row（默认），确保align-items: stretch生效（这是默认值，无需显式写） - 避免给子元素设置
height、min-height或max-height，否则会阻止拉伸 - 检查子元素是否用了
display: flex或position: absolute，这些可能脱离正常文档流，影响 stretch 行为
用 align-items: stretch（默认但需“干净”环境）
stretch 是 align-items 的默认值，但它只在子元素**未设置交叉轴尺寸**时才真正生效。例如：在 row 布局下，子元素不能有 height、min-height，也不能是 flex 子容器且自身又设了 align-items: flex-start 等。
- 移除子元素上显式的
height或min-height - 确保子元素内部内容没有意外的
margin或padding导致高度“撑开不一致” - 如果子项含图片或 iframe，加
height: 100%和object-fit: cover保证填充
手动统一高度：height: 0 + flex: 1 或 min-height
当 stretch 不起作用，或需要更可控的高度表现时，可主动干预：
立即学习“前端免费学习笔记（深入）”；
- 给所有子项设
height: 0; flex: 1;—— 这会让它们在交叉轴上“从零开始等比拉伸”，效果常比单纯 stretch 更稳定 - 或设统一的
min-height: 200px（配合align-items: stretch），既保底又允许内容更多时自然增高 - 慎用
height: 100%，它依赖父级有明确高度；flex 容器本身若没设高，100% 会失效
检查 box-sizing 和 border/padding 影响
即使高度拉伸成功，视觉上仍可能“看起来不齐”——因为边框、内边距增加了实际占用空间，而 stretch 拉的是 content box 高度（除非设了 box-sizing: border-box）。
- 给所有子项加
box-sizing: border-box，让 padding/border 包含在设定高度内 - 统一子项的
padding和border，避免个别项多出像素导致错位 - 用浏览器开发者工具检查 computed height，确认是否真被拉伸，还是只是“看起来一样”
