這幾年前端技術發展較快，談到前端就離不開頁面布局。網頁布局大概經歷了這幾個階段：最早期的Table表格布局 => 傳統的盒狀模型布局 => 再到現在的Flex彈性布局。
而彈性布局也是隨著CSS3而推出的，那我們該如何靈活運用彈性布局呢？彈性布局較傳統布局方式有哪些優勢呢？
傳統盒狀模型布局的弊端
截至當前，依舊有很多網站是基于盒狀模型來布局的，主要依懶display屬性 + position屬性 + float屬性來精確定位元素。雖然這種布局方式可以精確定位元素，但它依舊有很多弊端，比如：
瀏覽器兼容性問題較多；
特殊布局（如垂直居中）較難實現，有時寬度計算不準確；
過多的position會影響瀏覽器渲染性能等。
彈性布局如何使用？
彈性布局也就是Flex布局，通過Flex布局可以很簡單的實現各種頁面布局，而且它是響應式的，當前主流的瀏覽器都支持彈性布局。
彈性布局該如何來使用呢？掌握以下技術可以快速掌握彈性布局。
1、父級元素設置
彈性布局只需要對父元素和子元素進行很少的設置即可，父級元素設置display:flex就能開啟彈性布局。開啟彈性布局后，子級元素的排列方式、對齊方式也要在父級元素上設置，具體如下：
flex-direction：定義子級元素的排列方式；
flex-wrap：定義子級元素是否在一行顯示（要不要換行）；
justify-content：定義子元素水平排列方式；
align-items 與 align-content：定義子級元素垂直排列方式。
2、子級元素的設置
子級元素可用屬性不多，一般只有兩個：
box-sizing：設置子級元素的盒模型
flex：設置子級元素的寬度系數。