大家好，我是IT修真院北京總院Web第27期的學(xué)員李浩，一枚正直純潔善良的菜鳥(niǎo)前端程序猿
今天講下深度思考中的知識(shí)點(diǎn)————Flexbox（彈性盒布局模型）以及適用場(chǎng)景
1.背景介紹
布局的傳統(tǒng)解決方案，基于盒狀模型，依賴display屬性+ position屬性+ float屬性。
它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。
2009年，W3C提出了一種新的方案----Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。
目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。(ie10及以上)
Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
2.知識(shí)剖析
采用Flex布局的元素，稱(chēng)為Flex容器（flex container），簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex項(xiàng)目（flex item），簡(jiǎn)稱(chēng)"項(xiàng)目"。
任何一個(gè)容器都可以指定成flex布局
行內(nèi)元素也可以使用Flex布局
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
3.常見(jiàn)問(wèn)題
flex布局的兼容性
4.解決方案
因?yàn)榧夹g(shù)在不斷的更新，有些舊的瀏覽器只支持舊語(yǔ)法的書(shū)寫(xiě)方式，
所以就出現(xiàn)所謂的兼容性問(wèn)題。
主流的5大瀏覽器為Chrome，IE，F(xiàn)irefox，Safari，Opera
@mixin display ($flex) {
display: -webkit-flex;? /*新版本語(yǔ)法: Chrome 21+ */
display: -moz-flex;? /*老版本語(yǔ)法: Firefox */
display: -ms-flex;? /*混合版本語(yǔ)法: IE 10 */
display: -o-flex;? /*老版本語(yǔ)法: Opera */
display: flex;? /*新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
}
5.擴(kuò)展思考
lex在圣杯布局中的應(yīng)用：
圣杯布局（Holy Grail Layout）指的是一種最常見(jiàn)的網(wǎng)站布局。頁(yè)面從上到下，分成三個(gè)部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導(dǎo)航、主欄、副欄。
6.參考文獻(xiàn)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
以上是阮一峰大神的教程，我覺(jué)得很適合初學(xué)者看一看，通俗易懂，比較具體化。
感謝閱讀
鏈接: https://pan.baidu.com/s/1jHCzSc2
------------------------------------------------------------------------------------------------------------------------------------------
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始，找個(gè)師兄，帶你入門(mén)，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵?lái)與我一起學(xué)習(xí)吧 ！
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
