Flexbox多列等高默认成立，因flex容器子项在row主轴下交叉轴默认stretch拉伸；需父容器有明确高度、禁用height/min-height、确保display:flex且未设align-self:flex-start。
flexbox 多列等高为什么默认就成立
因为 display: flex 容器的子项（flex item）在主轴为 row 时，默认会沿交叉轴（即垂直方向）拉伸以填满容器高度。只要父容器有明确高度或能自然撑开，子项就会自动等高——不需要额外写 align-items，因为它的默认值就是 stretch。
常见误区是给子项设了 height 或 min-height，反而破坏了拉伸行为；或者忘了给父容器设 display: flex，只写了子项的 flex 相关属性。
- 父容器必须是
display: flex，且主轴方向为row（默认） - 子项不能设置
align-self: flex-start或height类固定高度值 - 若父容器高度由内容决定（如无高度限制），等高效果仍存在，但视觉上可能不明显——此时可加
min-height: 100vh或用其他方式锚定容器高度
当内容高度差异大时，如何避免底部空白溢出
等高后，短内容列底部会出现多余空白，这是 stretch 的正常表现，但有时影响布局节奏。解决思路不是取消等高，而是控制内容对齐方式或内部填充。
- 用
align-items: flex-start让所有子项顶部对齐（此时不再等高）——慎用，仅适用于明确不需要等高的场景 - 更推荐保留等高，改用
justify-content: space-between或margin-top: auto把按钮之类元素“推”到底部 - 子项内部用
display: flex; flex-direction: column+margin-top: auto实现“底部吸附”，这样既保持列等高，又优化了内容分布
例如：一个卡片列表中，每列有标题、描述、操作按钮，希望按钮始终贴底——就在卡片内部启用 column flex，并给按钮加 margin-top: auto。
立即学习“前端免费学习笔记（深入）”；
