今天來介紹一下 新的版面配置模組 Flexbox
Flexbox 的存在是為了讓大家設計更複雜的網頁配置，而他最實用的地方在：
- 即使各種螢幕和瀏覽器視窗大小不同或改變時，元素的位置大小仍然保持一致。
- Flexbox 可以減少對浮動的依賴，要讓浮動的元素保持正確的位置或大小處理實在是一個令人頭痛的問題。
Flex Container 的屬性有下列幾種：
flex-direction ( 指定在容器內子元素的配置方向 )
- row ( 預設 ) : 子元素會以來源文件宣告順序由（左至右）的排列方式顯示。
- row-reverse : 和 row 一樣的排列方式，可是方向。
- column : 子元素會以來源文件宣告順序由（上至下）的排列方式顯示。
- column-reverse : 和 column 一樣，可是方向相反。
範例 : flex-direction : column;
justify-content ( 指定在容器內子元素的配置位置 )
- flex-start ( 預設 )
- flex-end
- center
- space-between
- space-around
範例 ： justify-content ：cetner ;
- flex-start ( 預設 )
- flex-end
- center
- baseline
- stretch
範例：align-items：center ;
*再次解釋一下 flex-start,flex-end,center,space-between,space-around 的配置位置。（再次借用國外大大的圖 XD）
*再次解釋一下 flex-start,flex-end,center,space-between,space-around 的配置位置。（再次借用國外大大的圖 XD）
flex-wrap （ 指定子元素根據容器中的空間換行或成多欄 ）
- nowrap ( 預設 ) : 子元素不換行。
- wrap：子元素會換行顯示。
- wrap-reverse ： 子元素會換行顯示
範例 ：flex-wrap : wrap ;
align-content ( 會更改 flex-wrap 的行為，與 align-items 相似，請參考上面 )
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
flex-flow ( 是 flex-direction 和 flex-wrap的縮寫 )
- flex-flow : [flex-direction] [flex-wrap]
order ( 顧名思義就是用來調整 子元素的順序 )
範例 ：
margin （相信大家對 margin：auto ; 的用法相當熟悉，不過在 Flexbox 的 margin 確可以做出另大家期待已久的 真 - 垂直置中 ！！！！）
範例 ：
align-self （側軸對齊，會覆蓋父元素 align-items 的值，他的屬性與 align-items 一樣 請參考上面）
flex （彈性元素）
- flex : [ number ]
- flex : initial （在有剩餘空間下不會有任何變化）
- flex : auto （根據主軸自動伸縮佔用剩餘空間）
- flex : none （任何情況都不會伸縮）
範例 1： 第一個子元素佔用 1/2 空間 , 剩下兩個子元素各佔 1/4 的剩餘空間。
範例 2：將每個子元素設置為1,剩餘空間就會平均分配。
結論 ：
用 Flexbox 來配置版面看起來思考的方法要不太一樣，但也因為他很強大，相信會是未來用作規劃版面的趨勢。
參考資料 (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
