做過 PC 端后臺(tái)的同學(xué)肯定繞不開這個(gè)經(jīng)典布局左右兩列固定寬度中間內(nèi)容自適應(yīng)。左邊放導(dǎo)航右邊放廣告或輔助信息中間是核心內(nèi)容區(qū)。說白了就是——布局的盡頭是“中間自適應(yīng)”而自適應(yīng)的底氣來自 Flex 的flex: 1。但真要落地你會(huì)發(fā)現(xiàn)幾個(gè)坑固定列被壓縮、中間內(nèi)容溢出、DOM 順序和視覺順序不一致……以及一個(gè)高頻概念混淆——display: flex開啟的其實(shí)不是 BFC而是 FFC。今天這篇我們用一份可直接落地的代碼把三列布局和背后的格式化上下文講透。01 需求拆解三列布局到底在解決什么先明確需求左右兩列指定寬度比如 200px中間列占據(jù)剩余全部空間中間內(nèi)容優(yōu)先渲染左右兩側(cè)可以晚一點(diǎn)加載為什么中間優(yōu)先因?yàn)橹虚g往往是核心內(nèi)容用戶最關(guān)心左右兩側(cè)是導(dǎo)航、廣告晚一點(diǎn)無所謂。這背后涉及HTML 順序和渲染優(yōu)先級(jí)后面會(huì)細(xì)說。現(xiàn)在先用最簡(jiǎn)單的方式實(shí)現(xiàn)。02 代碼先行最簡(jiǎn) Flex 三列布局先上 HTMLdiv classlayout aside classleftLeft/aside main classmainMain Content/main aside classrightRight/aside /divCSS.layout { display: flex; } .left, .right { width: 200px; flex-shrink: 0; /* 關(guān)鍵防止固定列被壓縮 */ } .main { flex: 1; min-width: 0; /* 關(guān)鍵允許內(nèi)容換行防止溢出 */ }效果就是左右固定 200px中間自適應(yīng)?？雌饋砗芎?jiǎn)單但這里藏著兩個(gè)幾乎必踩的坑。03 兩個(gè)必踩的坑固定列被壓縮 內(nèi)容溢出坑一固定列被壓縮如果你只寫.left, .right { width: 200px; }那么當(dāng)中間內(nèi)容很寬時(shí)左右兩列會(huì)被壓縮到小于 200px。為什么因?yàn)?Flex 項(xiàng)目默認(rèn)flex-shrink: 1也就是說所有項(xiàng)目都可以收縮。當(dāng)容器空間不足時(shí)瀏覽器會(huì)按比例壓縮各項(xiàng)目。解決方案給固定列設(shè)置flex-shrink: 0告訴瀏覽器“這兩列別縮要縮就縮中間”?？佣虚g內(nèi)容溢出如果中間放了一段很長(zhǎng)的英文或數(shù)字沒有空格換行你會(huì)發(fā)現(xiàn)它把容器撐開了甚至出現(xiàn)橫向滾動(dòng)條。原因在于 Flex 項(xiàng)目的默認(rèn)min-width: auto它會(huì)根據(jù)內(nèi)容的最小尺寸來決定項(xiàng)目的最小寬度。解決方案給中間列設(shè)置min-width: 0允許內(nèi)容在必要時(shí)換行或截?cái)?。這兩個(gè)坑看起來不起眼但在真實(shí)項(xiàng)目中非常常見。記住這兩個(gè)屬性你就超過了 80% 用 Flex 寫三列布局的人。04 進(jìn)階讓 main 優(yōu)先渲染視覺順序用order調(diào)整回到需求里的第三點(diǎn)main 最先加載中間先渲染。如果 HTML 順序是left → main → right那么 main 并不是最先加載的它排在 left 后面。如果你真的想讓 main 最先出現(xiàn)在 DOM 里可以這樣寫div classlayout main classmainMain Content/main aside classleftLeft/aside aside classrightRight/aside /div然后利用 Flex 的order屬性調(diào)整視覺順序.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符合用戶習(xí)慣。注意order會(huì)改變視覺順序但也會(huì)影響鍵盤 Tab 導(dǎo)航順序。如果你的頁(yè)面有嚴(yán)格的鍵盤導(dǎo)航需求需要謹(jǐn)慎使用或者在tabindex上做額外處理。05 格式化上下文BFC vs FFC別搞混了很多同學(xué)包括早期寫筆記的我會(huì)以為display: flex開啟的是 BFC。實(shí)際上它開啟的是 FFCFlex Formatting Context。來理一理BFCBlock Formatting Context塊級(jí)格式化上下文。在 BFC 中塊級(jí)元素從上到下排列行內(nèi)元素從左到右排列。它是 HTML 根元素默認(rèn)開啟的上下文也是我們常說的“文檔流”的底層規(guī)則。FFCFlex Formatting Context彈性格式化上下文。由display: flex或inline-flex觸發(fā)。在 FFC 中子項(xiàng)按照 Flex 規(guī)則排列不再遵循塊級(jí)/行內(nèi)的文檔流規(guī)則。那為什么會(huì)有“開啟新的 BFC”這種說法因?yàn)楹芏嗖季址桨副热鏾verflow: hidden、float: left、position: absolute確實(shí)會(huì)開啟新的 BFC而display: flex開啟的是 FFC。兩者都是獨(dú)立的格式化上下文共同點(diǎn)是外層上下文管不到內(nèi)層上下文內(nèi)層上下文也不會(huì)影響到外層。也就是說你在.layout上設(shè)置display: flex這個(gè)容器內(nèi)部就形成了一個(gè)獨(dú)立的 FFC。外層 BFC 的規(guī)則比如塊級(jí)元素排列、margin 折疊無法影響內(nèi)部 Flex 子項(xiàng)的排列。這就是為什么我們能輕松實(shí)現(xiàn)三列布局而不被普通文檔流規(guī)則干擾。一句話總結(jié)display: flex創(chuàng)建的是 FFC不是 BFC。格式化上下文的獨(dú)立性才是 CSS 局部布局的底層邏輯。06 對(duì)比一下Grid 和 Float 實(shí)現(xiàn)三列布局雖然本文重點(diǎn)在 Flex但順便提一下另外兩種方案方便你在不同場(chǎng)景下做選擇。Grid 實(shí)現(xiàn).layout { display: grid; grid-template-columns: 200px 1fr 200px; }Grid 天生就是二維布局寫三列布局非常簡(jiǎn)潔。但需要注意Grid 的1fr和 Flex 的flex: 1類似都能自適應(yīng)。不過 Grid 在處理動(dòng)態(tài)內(nèi)容、復(fù)雜嵌套時(shí)會(huì)更強(qiáng)大。Float 實(shí)現(xiàn).left { float: left; width: 200px; } .right { float: right; width: 200px; } .main { margin: 0 200px; }Float 是最古老的方案但它需要清除浮動(dòng)且不能像 Flex/Grid 那樣方便地處理垂直對(duì)齊。除非需要兼容老瀏覽器否則不推薦。現(xiàn)代項(xiàng)目里三列布局首選 Flex 或 Grid。如果只是簡(jiǎn)單的三列Flex 足夠如果需要更復(fù)雜的柵格系統(tǒng)Grid 更合適。07 總結(jié)三列布局的核心要點(diǎn)最后把關(guān)鍵結(jié)論整理成一份可粘貼到筆記本里的清單基本結(jié)構(gòu).layout { display: flex; }左右固定width: 200px; flex-shrink: 0;中間自適應(yīng)flex: 1; min-width: 0;main 優(yōu)先渲染把 main 寫在 DOM 最前面用order調(diào)整視覺順序概念辨析display: flex開啟的是 FFC不是 BFC兩者都是獨(dú)立的格式化上下文寫到這里你會(huì)發(fā)現(xiàn)三列布局真的沒什么神秘的。Flex 幫我們做的是把“自適應(yīng)”這件事標(biāo)準(zhǔn)化了而我們要做的就是理解它背后的上下文規(guī)則別讓固定列縮水、別讓內(nèi)容溢出。