flex三栏等高失效的主因是父容器无有效高度参考，需检查父级是否被height:0、min-height:0或overflow:hidden压制，或存在grid/absolute中断高度传递。
直接用 display: flex 就够了，align-items: stretch 是默认行为，不用写，写了反而多余。
为什么三栏高度不一致？大概率是父容器没高度参考
Flex 的等高不是“强制拉伸到某个固定值”，而是“拉伸到父容器当前高度”。如果父容器 height: auto 且内部内容又很短，它本身就没撑开，子项再怎么 stretch 也无处可拉。
- 检查父容器是否被上层设了
height: 0、min-height: 0或overflow: hidden等压制高度的样式 - 最简单的验证方式：给父容器加
min-height: 300px或min-height: 100vh，看三栏是否立刻等高 - 如果页面结构嵌套深，可能某一层父级用了
display: grid或position: absolute，导致高度传递中断
左右栏固定宽 + 中间自适应，别用 width，用 flex: 0 0 200px
直接写 width: 200px 看似简单，但会干扰 Flex 的拉伸逻辑——尤其当内容超长或缩放时，容易触发溢出或换行异常。
-
.left, .right { flex: 0 0 200px; }表示“不放大、不缩小、基准宽 200px”，语义更准确 -
.center { flex: 1; }而不是flex: 1 1 auto，后者在内容撑大时可能反向压缩，破坏等高 - 如果某栏要“不参与等高”（比如侧边栏只按内容高度显示），加
align-self: flex-start，别改全局align-items
背景色没到底？不是没等高，是内容没占满子项高度
常见错觉：左侧栏文字少，背景色只到文字底部，以为“没等高”。其实 DOM 高度已等高，只是子项内部没把内容撑满自身。
- 给子项加
display: flex; flex-direction: column; height: 100%;，再让内容区域flex: 1，就能把背景色拉到底 - 记得加
box-sizing: border-box，否则padding和border会让实际高度超出计算值 - 避免在子项里用
float、position: absolute或height: 100%，这些都会切断 Flex 拉伸链
真正卡住的地方往往不在 align-items 本身，而在父容器的高度来源是否可靠、子项是否悄悄加了 height 或 align-self、以及嵌套中有没有非 Flex 容器截断了高度继承。先查这三点，比反复调 align-items 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
