做过 PC 端后台的同学肯定绕不开这个经典布局左右两列固定宽度中间内容自适应。左边放导航右边放广告或辅助信息中间是核心内容区。说白了就是——布局的尽头是“中间自适应”而自适应的底气来自 Flex 的flex: 1。但真要落地你会发现几个坑固定列被压缩、中间内容溢出、DOM 顺序和视觉顺序不一致……以及一个高频概念混淆——display: flex开启的其实不是 BFC而是 FFC。今天这篇我们用一份可直接落地的代码把三列布局和背后的格式化上下文讲透。01 需求拆解三列布局到底在解决什么先明确需求左右两列指定宽度比如 200px中间列占据剩余全部空间中间内容优先渲染左右两侧可以晚一点加载为什么中间优先因为中间往往是核心内容用户最关心左右两侧是导航、广告晚一点无所谓。这背后涉及HTML 顺序和渲染优先级后面会细说。现在先用最简单的方式实现。02 代码先行最简 Flex 三列布局先上 HTMLdiv classlayout aside classleftLeft/aside main classmainMain Content/main aside classrightRight/aside /divCSS.layout { display: flex; } .left, .right { width: 200px; flex-shrink: 0; /* 关键防止固定列被压缩 */ } .main { flex: 1; min-width: 0; /* 关键允许内容换行防止溢出 */ }效果就是左右固定 200px中间自适应。看起来很简单但这里藏着两个几乎必踩的坑。03 两个必踩的坑固定列被压缩 内容溢出坑一固定列被压缩如果你只写.left, .right { width: 200px; }那么当中间内容很宽时左右两列会被压缩到小于 200px。为什么因为 Flex 项目默认flex-shrink: 1也就是说所有项目都可以收缩。当容器空间不足时浏览器会按比例压缩各项目。解决方案给固定列设置flex-shrink: 0告诉浏览器“这两列别缩要缩就缩中间”。坑二中间内容溢出如果中间放了一段很长的英文或数字没有空格换行你会发现它把容器撑开了甚至出现横向滚动条。原因在于 Flex 项目的默认min-width: auto它会根据内容的最小尺寸来决定项目的最小宽度。解决方案给中间列设置min-width: 0允许内容在必要时换行或截断。这两个坑看起来不起眼但在真实项目中非常常见。记住这两个属性你就超过了 80% 用 Flex 写三列布局的人。04 进阶让 main 优先渲染视觉顺序用order调整回到需求里的第三点main 最先加载中间先渲染。如果 HTML 顺序是left → main → right那么 main 并不是最先加载的它排在 left 后面。如果你真的想让 main 最先出现在 DOM 里可以这样写div classlayout main classmainMain Content/main aside classleftLeft/aside aside classrightRight/aside /div然后利用 Flex 的order属性调整视觉顺序.layout { display: flex; } .main { flex: 1; min-width: 0; order: 2; /* 视觉上放中间 */ } .left { width: 200px; flex-shrink: 0; order: 1; /* 视觉上放左边 */ } .right { width: 200px; flex-shrink: 0; order: 3; /* 视觉上放右边 */ }这样DOM 顺序是main → left → rightmain 最先被解析和渲染视觉顺序则是left → main → right符合用户习惯。注意order会改变视觉顺序但也会影响键盘 Tab 导航顺序。如果你的页面有严格的键盘导航需求需要谨慎使用或者在tabindex上做额外处理。05 格式化上下文BFC vs FFC别搞混了很多同学包括早期写笔记的我会以为display: flex开启的是 BFC。实际上它开启的是 FFCFlex Formatting Context。来理一理BFCBlock Formatting Context块级格式化上下文。在 BFC 中块级元素从上到下排列行内元素从左到右排列。它是 HTML 根元素默认开启的上下文也是我们常说的“文档流”的底层规则。FFCFlex Formatting Context弹性格式化上下文。由display: flex或inline-flex触发。在 FFC 中子项按照 Flex 规则排列不再遵循块级/行内的文档流规则。那为什么会有“开启新的 BFC”这种说法因为很多布局方案比如overflow: hidden、float: left、position: absolute确实会开启新的 BFC而display: flex开启的是 FFC。两者都是独立的格式化上下文共同点是外层上下文管不到内层上下文内层上下文也不会影响到外层。也就是说你在.layout上设置display: flex这个容器内部就形成了一个独立的 FFC。外层 BFC 的规则比如块级元素排列、margin 折叠无法影响内部 Flex 子项的排列。这就是为什么我们能轻松实现三列布局而不被普通文档流规则干扰。一句话总结display: flex创建的是 FFC不是 BFC。格式化上下文的独立性才是 CSS 局部布局的底层逻辑。06 对比一下Grid 和 Float 实现三列布局虽然本文重点在 Flex但顺便提一下另外两种方案方便你在不同场景下做选择。Grid 实现.layout { display: grid; grid-template-columns: 200px 1fr 200px; }Grid 天生就是二维布局写三列布局非常简洁。但需要注意Grid 的1fr和 Flex 的flex: 1类似都能自适应。不过 Grid 在处理动态内容、复杂嵌套时会更强大。Float 实现.left { float: left; width: 200px; } .right { float: right; width: 200px; } .main { margin: 0 200px; }Float 是最古老的方案但它需要清除浮动且不能像 Flex/Grid 那样方便地处理垂直对齐。除非需要兼容老浏览器否则不推荐。现代项目里三列布局首选 Flex 或 Grid。如果只是简单的三列Flex 足够如果需要更复杂的栅格系统Grid 更合适。07 总结三列布局的核心要点最后把关键结论整理成一份可粘贴到笔记本里的清单基本结构.layout { display: flex; }左右固定width: 200px; flex-shrink: 0;中间自适应flex: 1; min-width: 0;main 优先渲染把 main 写在 DOM 最前面用order调整视觉顺序概念辨析display: flex开启的是 FFC不是 BFC两者都是独立的格式化上下文写到这里你会发现三列布局真的没什么神秘的。Flex 帮我们做的是把“自适应”这件事标准化了而我们要做的就是理解它背后的上下文规则别让固定列缩水、别让内容溢出。