前端的頁面布局知識是初中級前端工程師必須掌握的內容，在面試的時候無論大廠小廠都有很大概率被提問到，作為與頁面最緊密的前端開發者，前端布局知識是必不可少的一環。

前言

這里所要介紹的布局知識主要是在解決三列布局模式而出現的幾種布局解法，其中包含了經典的圣杯布局，雙飛翼布局，絕對定位的布局方式，還包含2009年W3C所提出的Flex布局方式和以CSS3所帶來的calc計算函數來解決三列布局的方式。

本文會通過實例的方式講解，帶你了解為什么沒有一種一勞永逸的方法解決三列布局的問題，看看分別在使用這些方式時分別都遇到了哪些的問題，通過分析解決，讓你明白這幾種方式的各自的優缺點與適用場景。

一、三列布局是什么

指共有三列，但是左右兩列是寬度固定，中間一列寬度根據屏幕寬度自適應的布局方式，這是一種比較常見的布局方式，很多網站首頁均采用這種方式布局，比如像下面比較熟悉的菜鳥教程官網。

二、三列布局解決方法

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我并在后臺私信我：前端，即可免費獲取。

1. 圣杯布局

圣杯布局，一個經典的三列布局解決方法，至于為什么 叫這個名字，我理解是布局完成后像個圣杯，接下來一步一步實現一下圣杯布局。

① 完成基礎效果

②. 將左側欄，右側欄移到與內容欄同樣高度，這里先利用float浮動元素。

注意浮動完成之后，footer元素被蓋在內容塊下面了。

③. 利用margin-left的負值將左側欄，右側欄和內容欄移到同一高度。將左側欄margin-left賦值為-100%；然后將右側欄margin-left賦值為負的自身寬度。

注意：這里的左右側欄都是附在內容欄上的，內容欄被壓在下面。

④. 將底部footer區域利用clear屬性清除content內的浮動元素透出來。

⑤. 將內容欄被左右壓在底下的部分，通過content添加padding屬性透出來。

.content { padding: 0 200px;}

這個時候真整個 content的內容都被padding縮放了，怎么辦呢？

⑥. 左右側邊欄利用position: relative，移出內容區域。

整個布局就完成了，你可以左右拉伸屏幕，內容區域為自動縮放，符合咱們 開始時的需求。

圣杯布局的問題：當縮放到一定程度，會發現整個頁面結構將會變亂。

當然利用min-width可以解決這個問題，因為min-width是后續css3中所出現的內容，在當時min-width還沒有的情況下，圣杯布局就存在這個問題。然而這個問題可以解決嗎？接下來進入雙飛翼布局。

2. 圣杯雙飛翼布局

雙飛翼布局是圣杯布局演化而來的，且是旨在要解決圣杯布局所遇到的問題，即縮小到一定程度后頁面布局依舊正常，因為代碼和圣杯基本一致，只是結構略有差異，這里不一步一步拆解。

從上面的DOM結構來看，雙飛翼布局與圣杯布局最大的不同點便是在此，雙飛翼布局中，將中間欄放在一個div內部包裹起來了，多了一層DOM結構。

下面看看樣式。

從上面雙飛翼的布局來看，css中沒有了position定位布局的內容了，感覺簡明而清晰了。

雙飛翼布局的問題：相比于圣杯布局多了一層DOM結構，導致頁面渲染性能下降。

3. 絕對定位布局

如果作為一個初學者，讓我解決這個問題，我一定會選擇絕對定位布局，因為絕對定位布局是最簡單最容易理解的一種三列布局解決方式。

思路非常簡單，列為以下幾步。

①. 將內容區域給margin值，居中且留出左右側邊欄的寬度。

②. 將外層content添加position:relative屬性。

③. 將左右側邊欄設置絕對定位屬性，position: absoluate，進行布局在與內容欄同高的位置。

④. 分別設置left:0與right:0 屬性，保持內容塊與左右側欄有順序且不重合排列。

css相關內容也非常容易理解，基本都是常用的定位相關內容。

上面的布局代碼雖然非常容易理解，但是它卻有一個致命的問題。

定位布局的問題：因為左右側的高度是絕對定位脫離文檔流的，此時footer區域只會在內容區塊下，而不是由內容塊和左右側欄三塊區域的高度而決定，所以在某些場景下是不能滿足需求的，如呈現出下面的效果。

4. Flex布局

flex布局是2009年W3C所提出的一種新的布局方式，在目前是非常好用且常見的布局方式，我感覺能解決頁面上百分之90的布局問題，但是因為出來的比較晚，會有部分瀏覽器兼容性的問題。

代碼完全是簡約而又大方，而且沒有上面三種布局所產生的問題，真是三列布局必備良品。

flex布局的問題：唯一能說的問題就是兼容性問題了。

flex布局解決三欄布局無疑絕對是最方便的，如果現在我遇到三列布局的問題，毋庸置疑我會選擇flex布局來解決，盡管有一些低版本瀏覽器的兼容性，9012年的今天請放心使用。

5. CSS3的calc函數

思路非常容易理解，就是中間三塊區域加float浮動起來，從左到右依次按順序排列，因為左右兩側寬度已知，而中間塊寬度需要自適應，所以只要在屏幕寬度變化的時候，通過css3的方法實時計算出中間內容塊自適應的寬度即可，非常符合人們的思維習慣。

calc是css3支持的css計算函數，它能動態的計算出一個值，打破傳統css概念，讓你的css也能做計算。

使用用法：calc(表達式)

calc() 的使用注意點：
運算符前后都需要保留一個空格，例如：width: calc(100% - 400px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；

css3計算屬性布局的問題：也是兼容性問題了，從下面可以看出來很多瀏覽器還是不支持的。

三、總結

上面就是經典的三列布局相關的知識，雖然圣杯布局和雙飛翼布局在現在很少被用到，但是作為一個前端開發者，還是要了解這些經典的布局相關知識，從而在面試出現的時候能夠從容應對。

實際上，在9012年的今天，其實在目前開發中百分之九十的布局都是可以通過flex布局來解決的，只要你沒有IE低版本的用戶需求，掌握Flex布局是非常重要的。

最后所介紹的css3計算屬性解決三列布局是一種比較貼近數學思想的角度出發，從計算的方式來解決自適應下的寬度變化，但是兼容性還是較差，所以作為實際解決方案還是不妥，就當是了解CSS3新世界的敲門磚吧。

---

如上內容如有錯誤或者認識偏差，如有問題，希望大家留言指正，以免誤人，若有什么問題請留言，會盡力回答之。

原文鏈接https://mp.weixin.qq.com/s/bPfdwdF1SR9Pt03zNhNebw
作者：TingRongGao

總結

以上是生活随笔為你收集整理的flex 左右布局_面试必考点：前端布局知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。