Flexbox多列等高默认生效是因为子项默认 align-items: stretch，仅在 flex-direction: row（或未设方向）时拉伸高度；column 方向下拉伸的是宽度而非高度。
Flexbox多列等高为什么默认就生效
因为 display: flex 容器的子项默认启用 align-items: stretch，只要没显式设置 align-items 或子项自身设了 align-self，高度就会被拉伸到容器最大内容高度。这不是“技巧”，而是 Flexbox 的基础行为。
常见错误现象：flex-direction: column 下误以为也能等高——不行，只有 row（或未设方向时的默认值）才让子项在交叉轴（即垂直方向）上拉伸；column 会让主轴变垂直，交叉轴反而是水平的，此时拉伸的是宽度，不是高度。
- 使用场景：卡片列表、后台管理侧边栏+主内容区、表单左右两栏对齐
- 如果父容器高度未限定（比如没设
height或min-height），子项仍会按自身内容撑开，看起来不等高——本质是容器没“基准”可拉伸 - 兼容性影响：IE10+ 支持
display: flex，但 IE10–11 对align-items和自动等高支持不稳定，需加-ms-flex-align: stretch
为什么加了 display: flex 还不等高
大概率是子项内部用了 float、position: absolute，或者设置了 align-self: flex-start / center 等值，主动关闭了拉伸行为。也可能是父容器的 flex-wrap: wrap 导致换行后各“行”独立计算高度。
- 检查子项是否写了
align-self—— 即使只写了一次，也会覆盖父级align-items - 避免在子项里用
float：Flex 子项浮动后会脱离 flex flow，不再参与对齐计算 - 若必须换行（如响应式多列），且要求所有列等高，得把整个容器设为单行 + 滚动/截断，或改用
grid（grid-template-rows: 1fr更可控）
和 CSS Grid 实现等高的关键区别在哪
Flexbox 是一维布局模型，等高依赖于“同一行内子项共享交叉轴尺寸”；Grid 是二维的，能直接定义行轨道，所以 grid-template-rows: 1fr 让每行高度均分，而 align-items: stretch 在 Grid 中只影响单元格内容对齐，不控制行高。
- Flex 更适合动态数量的横向排列（如未知个数的导航项），Grid 更适合固定结构的二维网格（如 3×3 卡片墙）
- 性能差异不大，但 Flex 在老浏览器 fallback 更简单（回退到
display: block至少保持可读性；Grid fallback 需额外媒体查询或 JS） - 参数差异：
flex: 1是缩放权重，flex: 1 1 auto才真正允许拉伸；而 Grid 的1fr就是明确分配剩余空间
容易被忽略的 min-height 和 box-sizing 影响
即使 Flex 拉伸生效，如果子项内容极少，又没设 min-height，视觉上还是“不等高”——因为拉伸是从内容高度开始算的。更隐蔽的是 box-sizing: border-box 缺失导致 padding/border 额外增加高度，破坏对齐。
- 务必给子项设
box-sizing: border-box（全局重置更稳妥） - 若需最小视觉高度（比如卡片至少 200px），加
min-height: 200px，而非只靠 flex 拉伸 - border 或 outline 不影响 flex 高度计算，但可能让元素溢出容器——检查
overflow是否被意外触发
真正麻烦的从来不是“怎么让它们一样高”，而是“怎么让它们在各种内容长度、字体加载、图片异步渲染下依然稳定对齐”。这时候得盯住 min-height、box-sizing 和子项内部的定位逻辑，而不是反复调 flex 参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
