最近這些天都在彌補css以及css3的基礎知識，在打開網頁的時候，發現了火狐默認首頁上有這樣一個東西。
第一個css屬性就沒有看懂。於是乎，開始各種找資料，各種看書。這些天把對於css3伸縮布局盒（flexbox）模型的理解寫成博文，目的是對flexbox做一個簡單的介紹。
以下的內容會分為如下小節：
1.關於css3中flexbox需要掌握的概念
2.flexbox實現水平垂直居中對齊
3.三列等高自適應，頁腳區域黏附底部的布局
1.關於css3中flexbox需要掌握的知識
因為對於三列等高自適應布局和水平垂直居中對齊需要一些對css3中flexbox基礎概念的理解，所以會對flexbox的概念做一個簡單的介紹，以為后面的實例做一個鋪墊。本人一直認為，不管學習任何知識，對於概念的理解都十分重要。
a：伸縮容器：是指通過display屬性顯示地給一個元素設置為flex或者inline-box（標准版本），這個容器就是一個伸縮容器。
b：伸縮項目：一個伸縮項目是伸縮容器的子元素。一個伸縮容器的內容具有零個以上的伸縮項目--伸縮容器的每個子元素都會成為一個伸縮項目（包括文字，稱為匿名伸縮項目）。
c：伸縮流方向：是指伸縮容器中的主軸方向，可以理解成x軸的方向。伸縮流方向主要通過flex-direction屬性（標准標准版本）來設置，默認值為row。
d：伸縮行換行：伸縮項目在伸縮容器中有時候會溢出伸縮容器。在伸縮容器屬性中，主要通過flex-wrap屬性來設置伸縮容器是否換行，默認值為nowrap。
e：伸縮性：定義伸縮項目可改變伸縮容器的寬度或高度填補可用的空間。可以將伸縮容器的額外空間分發給其伸縮項目或將他們縮小以防止伸縮項目溢出。
2.flexbox實現水平垂直居中對齊
html, body { height: 100%; width: 100%; } body { display: -moz-box; -moz-box-orient: vertical; -moz-box-align: center; -moz-box-pack: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: center; -webkit-box-pack: center; } .content { width: 300px; height: 300px; background-color: lightblue; text-align: center; display: -moz-box; -moz-box-orient: vertical; -moz-box-align: center; -moz-box-pack: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: center; -webkit-box-pack: center; }
<div class="content"><h1>水平垂直居中對齊</h1></div>
首先，設置html和body的寬度和高度都為100%，目的是讓其擁寬度和高度，否側主軸對齊（box-pack）和側軸對齊（box-align）無法讓伸縮項目之前分布伸縮容器的額外空間。
然后，讓body成為伸縮容器，設置display屬性為box，設置box-pack和box-align來控制主軸對齊和側軸對齊，讓其屬性值都為center。
最后，.content元素成為伸縮容器，這樣其內部文字塊會成為匿名伸縮項目。此時的.content元素即為伸縮容器，又為伸縮項目。當作為伸縮容器的時候，h1元素為其伸縮項目；當作為伸縮項目的時候，body為其伸縮容器。同樣為.content設置box-align和box-pack，來控制側軸對齊和主軸對齊方式 。
效果圖如下，.cotent元素和h1都實現了水平垂直居中對齊。
這里還有另外一個方案，就是使用絕對定位，然后配合css3中的transform使用。屬於不定寬高的水平垂直居中。當然，flexbox彈性布局盒模型也屬於不定寬高的水平垂直居中方案。
.wrapper { position: absolute; top: 50%; left: 50%; z-index: 3; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; }
3.三列等高自適應，頁腳區域黏附底部的布局
對於三列布局的方法有非常多種，可以通過對float+百分比寬度來實現，也可以用inline-block配合百分比實現，但是很難實現頁腳黏附瀏覽器可視窗口底部的布局。這里只對css3三列等高布局做介紹。
做任何的布局效果，都離不開HTML結構。
<div id="header"> <h1>頭部</h1> </div> <div id="page"> <div id="main"> <h1>主內容</h1> </div> <div id="sidebar-left"> <h1>左邊欄</h1> </div> <div id="sidebar-right"> <h1>右邊欄</h1> </div> </div> <div id="footer"> <p>頁腳</p> </div>
假設頭部和頁腳的寬度為100%，左右兩欄寬度為200px，而主內容自適應寬度。
body { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #header, #footer { width: 100%; padding: 10px; background-color: #ccc; } #footer { margin-top: 10px; } #sidebar-left, #sidebar-right { width: 200px; padding: 10px; background-color: #f36; }
這里為body設置box-sizing是為了讓盒模型的寬度=內容寬度+border+padding，避免在設置padding值時需要計算width的寬度。
接下來，使用伸縮布局盒模型box（舊版本，仍然可以使用），讓#page元素成為伸縮容器，設置box-flex讓其子元素擁有伸縮性，自適應伸縮容器的剩余空間。
#page { margin-top: 10px; width: 100%; display: -moz-box; display: -webkit-box; } #main { background-color: #e66; padding: 10px; margin: 0 10px; -moz-box-flex: 1; -webkit-box-flex: 1; }
上面代碼中，使用為#page元素設置了display屬性讓其成為一個伸縮容器。這里要注意的是必須設置width。如果沒有設置width，這里的#main元素的box-flex屬性會失效，原因在於父容器沒有寬度，自然無法填充伸縮容器的額外空間，（這里的額外空間指的是#page元素所占的面積，而不單單指寬度）。為#main元素設置box-flex屬性是讓其自適應伸縮容器的額外寬度。因為webkit內核的瀏覽器（Chrome，Safari）和Gecko內核（Firefox）不支持box-flex屬性和box屬性，所以必須添加廠商前綴。
上面實例中，需要修改一下主內容和左邊欄，右邊欄的排列方式，使用box-ordinal-group屬性。
#sidebar-right { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; } #main { background-color: #e66; padding: 10px; margin: 0 10px; -moz-box-flex: 1; -moz-box-ordinal-group: 2; -webkit-box-flex: 1; -webkit-box-ordinal-group: 2; }
上面代碼中，使用了box-ordinal-group屬性，這個屬性是用於修改伸縮項目在伸縮容器中的顯示順序，默認值為1，也就是按照DOM文檔流出現的先后順序進行排序。下面重置了box-ordinal-group屬性之后的效果。
至此，這個頁面就已經做好了。但是出現了一個問題，就是頁腳區域不會黏附在瀏覽器窗口可視區域底部，這讓用戶體驗非常糟糕。
使用css3的flexbox屬性實現就很簡單。最關鍵的技巧就是讓body元素變成一個伸縮容器，並且使用伸縮性屬性box-flex讓頁腳區域之前的div具有伸縮性（也就是#page元素）。也就是說，頁腳區域前的div會變成一個伸縮項目，會根據伸縮容器的高度自適應填充伸縮容器的額外空間，也就是自動拉伸頁腳區域前的div填充瀏覽器可視區域中的所有空間。
如果希望整個頁面的布局要和瀏覽器窗口可視區域一樣高，
首先必須設置html和body元素的高度和瀏覽器窗口可視區域高度一樣高。如果少了body高度的設置，body本身就沒有高度，當然伸縮項目的伸縮性也就無法體現。
html, body { height: 100%; }
其次，讓body元素自身成為一個伸縮容器，並且設置伸縮流方向（box-orient）為vertical（舊版本中的屬性）。
body { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-box-orient: vertical; width: 100%; }
最后，設置頁腳區域前的div（#page元素）中的box-flex屬性，讓其根據伸縮容器（這里是指body）的高度自適應伸縮容器body的額外空間，也就是自動拉伸#page元素的高度。這樣就會是頁腳一直在瀏覽器可視窗口底部顯示。
#page { margin-top: 10px; width: 100%; display: -moz-box; -moz-box-flex: 1; -moz-box-align: stretch; display: -webkit-box; -webkit-box-flex: 1; -webkit-box-align: stretch; }
上面代碼中，#page元素本身是一個伸縮容器，現在變成伸縮項目。在伸縮布局盒模型中，伸縮項目在側軸的對齊方式box-align（舊版本）默認值為stretch，（css中可不寫box-align屬性）致使#page元素的三個伸縮項目都會自動拉伸，不管內容高度有多少都具有伸縮容器#page的高度，從而實現三列等高布局並且頁腳黏附瀏覽器可視區域底部的效果。最后附上效果圖。
完。
感謝大家的閱讀。