flex子项默认等高，因align-items默认值为stretch，使直接子项在交叉轴（垂直方向）拉伸填满父容器高度；前提是父容器display:flex且有明确高度来源，子项未设height/min-height/align-self等干扰属性。
Flex 实现两栏等高不是“需要额外设置”，而是默认行为——只要父容器有可靠高度，子项没手动限制高度，两栏就天然等高。
为什么 flex 子项默认等高？
因为 align-items 默认值是 stretch，它会让所有直接子项在交叉轴（垂直方向）上拉伸填满容器可用高度。这不是“凑巧生效”，而是 Flex 布局的底层对齐机制。
- 父容器必须是
display: flex，且子项是它的**直接子元素**；间接嵌套会中断 stretch 行为 - 子项不能设
height、min-height或align-self: flex-start，否则拉伸被覆盖 - 父容器需有明确高度来源：比如
min-height: 100vh、height: 500px，或由内容撑开（但此时“等高”取决于内容最高者）
两栏布局中左固定右自适应怎么写才不破等高？
关键在 flex 缩写值的三个参数含义，只写 width 容易出问题。
- 左栏推荐用
flex: 0 0 240px：不增长、不收缩、基准宽 240px —— 比width: 240px更稳，防内容溢出挤压 - 右栏用
flex: 1：占据剩余空间，同时保持 stretch 对齐 - 避免给右栏加
overflow: hidden或position: relative后再嵌套绝对定位元素，这可能触发 BFC 导致高度计算异常
常见错误现象和排查点
看着写了 display: flex 却不等高，八成是下面某个地方被悄悄改了。
- 全局 CSS 重置里写了
align-items: flex-start—— 检查body或父级组件样式是否覆盖了默认 stretch - 某栏内部用了
display: table或height: 100%，而父容器没设height，导致子项高度计算链断裂 - 用了
flex-direction: column却还指望左右等高 —— 此时交叉轴变成水平方向，align-items控制的是宽度对齐，不是高度 - 父容器外层有
overflow: hidden且高度受限，子项被截断后视觉上“不等高”，实际仍是拉伸状态
要不要加 height: 100% 或 min-height？
加 min-height 是安全的，加 height: 100% 很危险。
-
min-height: 100vh可靠：保证容器至少视口高，子项 stretch 有空间可拉 -
height: 100%必须确保所有父级都有显式高度，否则计算失败，子项 fallback 到内容高度 - 如果页面是单页应用（SPA），路由容器没设高度，
height: 100%在子路由里大概率失效
真正容易被忽略的不是怎么写 flex，而是父容器有没有“可信的高度来源”——没有这个前提，align-items: stretch 就像没水的水泵，转得再快也抽不上来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
