三栏等高需父容器有可靠高度、子项不切断拉伸链、盒模型不干扰计算。grid（grid-template-columns）为首选，flex回退；须防height/align-self/box-sizing干扰，响应式需显式重定义布局。
三栏等高在管理系统中不是“加个属性就能好”，而是必须让父容器有可靠高度来源、子项不主动切断拉伸链、盒模型不干扰空间计算——缺一不可。
父容器没高度参考，align-items: stretch 就是摆设
Flex 默认的 align-items: stretch 不是魔法，它只把子项拉伸到父容器当前计算出的高度。如果父容器是 height: auto 且内部内容极短，它本身高度就是 0，子项再 stretch 也没地方可拉。
- 最直接验证：给父容器加
min-height: 100vh或min-height: 300px，三栏立刻等高 → 说明问题出在高度来源上 - 检查父级是否被
height: 0、min-height: 0、overflow: hidden压制（尤其常见于封装好的 UI 组件或第三方 layout 包） - 深嵌套时，某一层用了
display: grid或position: absolute，会中断高度传递链，得逐层 inspect 计算高度
grid-template-columns 是管理系统首选，一行定义结构+天然等高
Grid 的行高由该行最高项决定，同一行内所有列自动等高，无需 hack，语义也更贴近“管理界面”的结构直觉（如左侧菜单 + 主内容 + 右侧工具栏）。
- 写法简洁：
.container { display: grid; grid-template-columns: 240px 1fr 280px; min-height: 100vh; gap: 12px; } -
1fr不是百分比，是“剩余空间单位”，和flex: 1行为一致；防塌缩用minmax(300px, 1fr) - IE11 不支持
gap和1fr？回退用 Flex，别硬套 Grid 前缀 ——grid-column-gap+ 具体像素列宽更稳妥 - 别在 Grid 容器里混用
float或position: absolute，它们会直接退出网格流，调试时 DOM 高度看起来“空了”
子项加了 height、align-self: flex-start 或 box-sizing 错位，等高就失效
等高不是“强制拉平”，而是“统一拉伸到父高”。只要子项自己设了固定高度、或主动声明不参与拉伸，就会脱离 stretch 链。
- 背景色没到底？不是没等高，是子项内部没占满自身高度 —— 给子项加
display: flex; flex-direction: column; height: 100%;，再让内容区flex: 1 - 左右栏别只写
width: 200px，改用flex: 0 0 200px（不放大、不缩小、基准宽），避免 flex 容器里被意外拉伸 - 中间栏必须写
flex: 1（等价于flex: 1 1 0%），不是flex: 1 1 auto—— 后者以内容宽度为基准，长文本进来就缩窄 - 全局加
* { box-sizing: border-box; }，否则padding和border会让实际高度超出计算值，间距错乱
响应式切换时三栏挤成一团，多半漏写了 @media 里的布局重定义
小屏下不能只靠 grid-template-columns: 1fr 或 flex-direction: column 就完事，必须显式覆盖原布局逻辑，否则三栏还在横排强行压缩。
- 写法要完整：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } }或{ flex-direction: column; } - 如果主内容区需语义优先（比如 SEO/读屏器），加
order: -1给<main></main>，而不是靠 HTML 顺序硬调 —— 否则 Grid/Flex 重排后逻辑就断了 - 别用
display: block覆盖 Grid/Flex 容器，会彻底破坏布局上下文，查起来像“样式没生效”
真正卡住的地方，往往不在 align-items 或 grid-template-columns 这些语法本身，而在父容器的高度是否真实可测、子项有没有悄悄加 height 或 align-self、以及嵌套中是否存在非 Flex/Grid 容器截断了高度继承链 —— 先查这三点，比反复调样式快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
