CSS3 display:flex

display: box及display: flex，兩者是類似的伸縮排版語法但現在已經改成display: flex。

display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

display: box是存在的版本，但是它是過去的，現在使用的是display: flex。

目前compass的核心也還是使用display: box

display: flex

這是相當正式的版本，以我目前手上的firefox及chrome都是不需要前輟詞就可以運作。

//sass code
.display-box
  display: flex   
  width: 100%

和display: box設定其實差不多，外層設定只是把box換成了flex，且不需要前輟詞(目前我測試chrome & Firefox是可以正常顯示，IE10不行，safari不行)。

//sass code
.flex3    
  flex: 3
.flex5    
  flex: 5

內層只要設定flex加上值就可以，下面的結果就是左邊的1加上右邊的3得到4，左邊就會顯示1/4的黃色，右邊則是3/4的深藍色。

一樣可以插入更多的flex，如以下範例就是被分成九等份，再由三個flex去分配。

與固定值共用

接下來，我們插入一個固定值200px，那麼空間會保留200px的大小，剩於的再由flex去分攤，flex依然會在剩下的空間分為四等分(如下範例)。

混合使用

在過去這樣的問題相當難解決，透過CSS3我們可以將許多種單位混用，如下範例，可以先切200px，在切20%，剩餘的區域在分為1/4與3/4。

flex-direction

flex-direction等於box-direction的強化版，可以決定垂直排列及反轉排列。

名稱： flex-direction
值：   row | row-reverse | column | column-reverse

正常版

預設值就是flex-direction: row，水平由左至右排列。

水平反轉

flex-direction: row-reverse，就可以水平反轉排列。

垂直柱狀

而將值設定為column，就可以垂直排列(如果換成column-reverse就可以垂直反轉噢～)。

在柱狀排列下，也可以設定百分比排列(box-flex的情況，firefox不支援垂直百分比。)