前言
在上一篇文章《
CSS常見面試題-你有了解過CSS中的flex佈局嗎？》中，我們有講過flex佈局的特點。今天這篇文章我們來看看使用flex如何實現經典的聖盃佈局。
CSS
聖盃佈局
首先我們來看看，什麼是聖盃佈局呢？
聖盃佈局是一種左中右三欄佈局的情況，左側，右側定寬或者自適應，中間內容欄自適應。在PC端頁面足夠寬時，會呈現水平三欄佈局，而在移動端頁面寬度較小的時候，自動轉換為垂直三欄佈局。
聖盃佈局的優勢是，只需要寫一套代碼就可以兼容PC和移動端兩套環境。
實際演示
首先我們看看PC端的展示情況，如下所示。
左側nav欄，中間article欄和右側aside欄都會自適應。
PC端佈局
當屏幕的寬度小於一定的值後，會自動呈現垂直方向的佈局，如下圖所示。
其中的article欄，nav欄和aside欄都自動變成水平佈局。
移動端佈局
代碼實現
接下來我們看看整個佈局的代碼實現。
HTML部分代碼
HTML部分的代碼比較簡單，就是一系列header，div和footer標籤。
HTML代碼
代碼實現-CSS
CSS部分的代碼是整個實現的重點，這裡我們採用flex佈局。
header和footer
header和footer部分的代碼比較簡單，只需要設置一個高度值，基本的margin，padding值即可。
header，footer屬性
外層容器main
外層容器需要設置其flex佈局方式，而且其排列方式為水平row方向。
容器CSS屬性
nav部分的CSS屬性
我們對nav部分的CSS進行如下設置。
flex的order值為1，排在最左邊。
flex屬性部分，初始寬度佔據20%，當外層容器寬度增大時，可擴展比例為1，當外層容器寬度縮小時，可縮小比例為6，意思就是容器寬度不夠時，儘量減小nav的空間。
基本的margin，padding，border等屬性。
得到的CSS屬性如下。
nav的CSS屬性
aside部分的CSS屬性
我們對aside部分的CSS進行如下設置。
flex的order值為3，排在最右邊。
flex屬性部分，初始寬度佔據20%，當外層容器寬度增大時，可擴展比例為1，當外層容器寬度縮小時，可縮小比例為6，意思就是容器寬度不夠時，儘量減小aside的空間。這點和nav部分基本是一致的。
基本的margin，padding，border等屬性。
得到的CSS屬性如下。
aside的CSS屬性
article部分的CSS屬性
我們對artice部分的CSS進行如下設置。
flex的order值為2，排在中間。
flex屬性部分，初始寬度佔據60%，當外層容器寬度增大時，可擴展比例為3，當外層容器寬度縮小時，可縮小比例為1，意思就是容器寬度不夠時，儘量不減小article的空間，讓article儘可能多的佔用空間。
基本的margin，padding，border等屬性。
得到的CSS屬性如下。
article部分的CSS屬性
以上部分就是類似於PC端佈局的CSS屬性。
類似於移動端佈局
當頁面的寬度減小到不足以支撐水平三欄佈局時，需要將三欄處理為垂直方向。
此時需要將容器內元素的排列方式設置為column，排序的順序也轉變為文檔內的元素定義順序。
類似於移動端佈局CSS屬性
至此，所有的代碼都已經講解完畢。
如果完整運行後得到的就會是文章一開始的結構圖了，然後自己可以伸縮瀏覽器的寬度看看效果。
結束語
今天這篇文章主要是通過flex佈局的方式來實現平時很常見的聖盃佈局，如果大家細緻的看完代碼的話，相信對flex會有更深的瞭解。
