直接用display: flex可实现三栏等高，但多数人失败因父容器无高度参考、子项误设height或align-self、或嵌套中grid/absolute中断高度传递；需确保父容器有min-height、子项无交叉轴尺寸限制、并统一box-sizing。
直接用 display: flex 就能实现三栏等高，但多数人卡在“写了却没等高”——问题几乎都出在父容器没高度参考、子项悄悄加了 height 或 align-self、或者嵌套中某层用了 grid 或 absolute 中断了高度传递。
父容器为什么没高度？检查这三点
Flex 的等高不是“强制拉伸”，而是“拉伸到父容器当前高度”。如果父容器 height: auto 且内容很短，它本身就没撑开，子项再怎么 align-items: stretch（默认行为）也无处可拉。
- 给父容器加
min-height: 100vh或min-height: 300px快速验证：加完立刻等高，说明就是高度来源缺失 - 检查上层是否设了
height: 0、min-height: 0或overflow: hidden，这些会压制高度传递 - 查看 DOM 结构里有没有
display: grid或position: absolute的父级——它们会切断 Flex 高度继承链，导致子项“看不见”父容器真实高度
左右栏固定宽 + 中间自适应，别写 width
用 width: 200px 看似简单，但会干扰 Flex 的空间分配逻辑。尤其当内容超长或缩放时，容易触发溢出、换行或背景色不到底。
- 左右栏统一用
flex: 0 0 200px：表示“不放大、不缩小、基准宽 200px”，语义准确且抗干扰 - 中间栏用
flex: 1（等价于flex: 1 1 0%），不是flex: 1 1 auto；后者以内容宽度为基准，在图片或长文本下可能反向压缩 - 所有子项加
min-width: 0，防止内部文字/图片的固有尺寸顶开布局
背景色没到底？不是没等高，是内容没占满子项
常见错觉：左侧栏文字少，背景色只到文字底部，以为“没等高”。其实 DOM 高度已等高，只是子项内部没把内容撑满自身。
- 给子项加
display: flex; flex-direction: column; height: 100%;，再让内容区域flex: 1，背景色就能拉到底 - 务必加
box-sizing: border-box，否则padding和border会让实际高度超出计算值 - 避免在子项里用
float、position: absolute或height: 100%，这些都会切断 Flex 拉伸链
gap 比 margin 可靠，但别混用
gap 是 Flex 和 Grid 原生支持的间距控制方式，不塌陷、不干扰空间分配，比 margin 更干净。
- 父容器直接写
gap: 12px，别给每个子项单独加margin-right或margin-left - 如果响应式下要改间距，直接在
@media里覆盖gap值，不用重写所有margin - 注意 IE11 不支持
gap，真要兼容就回退用margin并配合:first-child/:last-child清除首尾边距
真正难调的从来不是“怎么写出来”，而是当设计说“左栏加 20px padding、右栏要最小 80px、中间必须撑满剩余空间且不能低于 400px”时，你能不能一眼看出该动 flex-basis、加 min-height 还是改 box-sizing——这时候看浏览器开发者工具里 computed styles 下的 flex-basis 和 height 实际值，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
