Flexbox（彈性盒佈局模型）以及適用場景

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【Flexbox（彈性盒佈局模型）以及適用場景 】

你們好，我是IT修真院北京總院Web第27期的學員李浩，一枚正直純潔善良的菜鳥前端程序猿

今天講下深度思考中的知識點————Flexbox（彈性盒佈局模型）以及適用場景

1.背景介紹

佈局的傳統解決方案，基於盒狀模型，依賴display屬性+ position屬性+ float屬性。

它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。

2009年，W3C提出了一種新的方案----Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。

目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。(ie10及以上)

Flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。
 

2.知識剖析

採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。

任何一個容器均可以指定成flex佈局

行內元素也能夠使用Flex佈局

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。

主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

 

 

 

3.常見問題

flex佈局的兼容性

4.解決方案

由於技術在不斷的更新，有些舊的瀏覽器只支持舊語法的書寫方式，

因此就出現所謂的兼容性問題。

主流的5大瀏覽器爲Chrome，IE，Firefox，Safari，Opera

@mixin display ($flex) {

display: -webkit-flex;  /新版本語法: Chrome 21+ /

display: -moz-flex;  /老版本語法: Firefox /

display: -ms-flex;  /混合版本語法: IE 10 /

display: -o-flex;  /老版本語法: Opera /

display: flex;  /新版本語法: Opera 12.1, Firefox 22+ /

}

5.擴展思考

lex在聖盃佈局中的應用：

聖盃佈局（Holy Grail Layout）指的是一種最多見的網站佈局。頁面從上到下，分紅三個部分：頭部（header），軀幹（body），尾部（footer）。其中軀幹又水平分紅三欄，從左到右爲：導航、主欄、副欄。

 

聖盃佈局

 

6.參考文獻

http://www.ruanyifeng.com/blo...

http://www.ruanyifeng.com/blo...

以上是阮一峯大神的教程，我以爲很適合初學者看一看，通俗易懂，比較具體化。

 

 

感謝閱讀

 

PPT

連接: https://pan.baidu.com/s/1jHCzSc2

密碼: hpu7