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。
立即学习“前端免费学习笔记（深入）”；
IE10–11 中 flex 等高失效的典型原因
IE 对 flex 的实现不完整，尤其在嵌套 flex 容器或遇到 min-height 时容易退化。最常触发问题的是：flex: 1 在 IE 中不完全等价于 flex: 1 1 0，且 align-items: stretch 在某些组合下被忽略。
- 显式写全
flex: 1 1 0，而不是简写flex: 1 - 避免对 flex 子项同时设置
height和flex，IE 会优先按 height 渲染 - 父容器不要用
min-height替代height，IE 下min-height不触发 stretch 行为；可改用height: 1px; min-height: 100%这类 hack - 如果必须支持旧 IE，建议降级为
display: table-cell方案，而非强求 flex 等高
与 CSS Grid 做等高对比时该选哪个
Grid 也能轻松实现多列等高（比如 display: grid; grid-template-columns: repeat(3, 1fr)），但它和 Flex 的语义定位不同：Grid 适合二维布局（行列都需精确控制），Flex 更适合一维流式排列（如导航栏、卡片行）。
- 如果只是单行多列且需要等高，Flex 更轻量、兼容性更好（尤其考虑 IE11 时）
- 如果列数动态、或需要跨行/错位/响应式重排（如某列占两行），Grid 的
grid-area和span更可控 - 二者都能等高，但 Grid 的等高基于轨道（track），Flex 基于容器交叉轴——这意味着 Grid 中不同行的同列会各自等高，而 Flex 是整行所有子项统一拉伸
真正容易被忽略的是：Flex 的等高依赖容器高度是否“可测量”。如果父容器被 position: absolute 或 float 脱离文档流，又没设高度，那即使写了 display: flex，子项也不会等高——这时候得先解决父容器的高度来源问题，而不是调 flex 属性。
