CSS3 -- FlexBox(彈性盒子)
盒子模型
CSS中有一種基礎設計模式叫盒模型，盒模型定義了Web頁面中的元素如何來解析。
在盒模型中主要包括width、height、border、background、padding和margin這些屬性，而且他們之間的層次關系可以相互影響。
w3c的標準盒子模型 和 IE的傳統盒子模型的區別
標準 w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
註意：不加 doctype 聲明， ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子... 所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，加上了 doctype 聲明，所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
伸縮布局： FlexBox
CSS3為display屬性增加了一個新值flex，於是誕生了一種新的布局方式：flexbox布局。
flexbox布局的優點是可以根據需要自動修改彈性容器內項目的間距和大小。利用這點，可以在不借助任何框架的情況下，只用短短幾行代碼就實現響應式布局（項目寬度可以自適應）
語法：div{ display: -webkit-flex; display: flex; }
在flexbox布局中，若子元素沿x軸排列，則稱x軸為主軸，y軸為副軸(側軸)，反之亦然。
flex-direction
flex-direction屬性決定主軸的方向（即項目排列方向）
語法： flex-direction:row | row-reverse | column | column-reverse;
row(默認值):主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，起點在右端
column:主軸為垂直方向，起點在上沿
column-reverse:主軸為垂直方向，起點在下沿
justify-content
justify-content屬性定義了項目在主軸上的對齊方式
語法： justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：默認值 , 表示相對於主軸起點對齊。
flex-end：表示相對於主軸終點對齊。
center：居中對齊。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
space-between：表示兩端對齊並將剩余空間在主軸方向上進行平均分配 （首尾項目靠邊）
space-around：表示居中對齊然後在主軸方向上將剩余空間平均分配 （首尾項目和邊界之間有空白）
align-items
align-items屬性： 用來表示可伸縮項目在側軸方向上的對齊方式(每行內子元素的對齊方式)
語法： align-items : flex-start | flex-end | center | baseline | stretch
baseline : 以第一行文字底部為基準對齊。
stretch：默認值，如果容器項目沒設高度，則采用stretch, 所有項目都和最高的一樣。如果項目有高度，則顯示 為 flex-start。
flex-wrap
flex-wrap屬性：定義是否允許換行
語法： flex-wrap: nowrap | wrap | wrap-reverse
nowrap - 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap - 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
註意：
（1）如果項目橫排，且項目無width屬性時，項目寬度和內容寬度相同。
（2）給項目設置width屬性時，項目總寬少於容器的時候， 會按width設置，項目總寬超出容器時，因為默認不換行，寬度自適應（平分寬度）。
（3）設置換行，則寬度還按width設置的顯示。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。默認值為 row nowrap；
align-content
當進行多行布局時，可以使用align-content屬性來指定各行之間的對齊方式。
語法： align-content : flex-start | flex-end | center | space-between | space-around | stretch
flex-start：從cross（側軸）-start開始布局所有行。
flex-end：從cross-end開始布局所有行。
center：居中布局所有行。
space-between：均分行之間的空白。
space-around： 均分每行兩側空白。
stretch: 默認值。當子元素沒有指定高度時，則采
用此設定，擴展高度填滿父元素。
align-self
該屬性是給各個可伸縮項設置自己的在側軸上的對齊方式的
之前在容器上設置的align-item屬性是作為一個整體設置的，所有的元素對齊方式都一樣。
align-self屬性會覆蓋之前的align-item屬性，讓每個可伸縮項在側軸上具有不同的對齊方式,設置align-self時，不要在伸縮容器中設置align-item。
語法： align-self : flex-start | flex-end | center | baseline | stretch
order
order屬性控制元素在布局中出現的順序。(添加在伸縮項目上，針對所有行的項目進行排序 )
註意：若子元素有多個，只在一個上面加了order，則效果可能跟你想的會有所出入哦~
語法： order: -1;
flex
一般有兩種使用方法（添加在伸縮項目)：
1、設所有伸縮項目 flex: 1, 這樣所有子元素的總寬度等於容器寬度（原來多行會變一行）。
2、在所有flex: 1 的基礎上，可以給個別子元素單獨設置 flex : 2,這樣該元素寬度是其它元素的2倍。
flex-grow
可以使用flex-grow屬性來指定元素寬度，但是該樣式屬性對於元素寬度的計算方法與flex樣式屬性對於元素寬度的計算方法有所不同。（添加在伸縮項目上）
註意：
（1）當給所有伸縮項目設置 flex-grow : 1 ，並且允許換行時，則每行內項目均分寬度，填滿整行。
（2）如果項目本身有寬度，則參考此寬度決定是否換行，而因為有flex-grow:1,則自動調整最終寬度，填滿整行。
（3）如果不允許換行，則可以選擇用flex-grow 或flex-shrink。
a. 當子元素的width樣式屬性值的總和小於容器元素的寬度值時，必須通過flex-grow樣式屬性來調整子元素寬度
b. 當子元素的width樣式屬性值的總和大於容器元素的寬度值時，必須通過flex-shrink樣式屬性來調整子元素寬度。
計算方法如下：
<div id=”main”>
<div class=”content”></div>
<div class=”content”></div>
<div class=”content”></div>
</div>
<style>
#main {
display: flex;
width: 600px;
}
.content {
width:150px;
flex-grow:1;
}
.content:nth-child(2) {
flex-grow:3;
}
</style>
當伸縮項目寬度總和小於伸縮容器寬度時：
1、600(容器寬度)-150*3（三個樣式類名為content的div元素寬度的總寬度）=150
2、150/5(三個樣式類名為content的div元素寬度的flex-grow樣式屬性值的總和)=30
第一個與第三個樣式類名為content的div元素寬度均等於150（其width樣式屬性值+）+30*1（其flew-grow樣式屬性值）=180px
第二個樣式類名為content的div元素寬度的寬度等於150（其width樣式屬性值+）+30*3（其flew-grow樣式屬性值）=240px
flex-shrink
<style>
#main {
display: flex;
width: 600px;
}
.content {
display: flex;
flex-direction: column;
width:250px;
flex-shrink:1;
}
.content section:nth-child(2) {
order: -1;
}
.content:nth-child(2) {
flex-shrink:3;
}
</style>
當伸縮項目寬度總和大於伸縮容器寬度時：
1、250*3（三個樣式類名為content的div元素寬度的總寬度）-600(容器寬度)=150
2、150/5(三個樣式類名為content的div元素寬度的flex-shrink樣式屬性值的總和)=30
第一個與第三個樣式類名為content的div元素寬度的寬度均等於250（其width樣式屬性值+）-30*1（其flew-shrink樣式屬性值）=220px
3、第二個樣式類名為content的div元素寬度的寬度等於250（其width樣式屬性值+）-30*3（其flew-grow樣式屬性值）=160px
另附上阮一峰大神經典的骰子實例：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
CSS3 -- FlexBox(彈性盒子)