一、css3彈性盒是什麼？

       一種提供響應式佈局的解決方案，與傳統的CSS2盒模型在子元素表現上有很大不同。具體不同是在盒子會自動隨著外部元素的寬度或者裝置寬度不同而動態分配寬度。

二、佈局結構：父元素+n個子元素

        父元素以box-開頭的相關屬性：

1. display:flex   宣告彈性盒佈局

2.    box-orient（horizontal|vertical）宣告內部子元素的排列方向

3. box-lines(single|multiple)  子元素佈局是否自動換行   chrome firfox 暫不支援multiple

4. box-pack(start|center|end|justify)

5. box-align(start|center|end|baseline|stretch)  相對子元素之間的垂直排列方式，也可以想象 css2 裡的vertical-align  屬性，方便記憶 ；baseline 以英文字母o,m,n底邊位置線為準

  stretch 預設值，拉伸子元素以填充父塊元素。

子元素屬性：

1.box-flex: 0.0（預設值）   子元素的可伸縮的相對比例   目前沒有瀏覽器支援box-flex,即 chrome,safari 要使用-webkit-字首，Firefox 要使用-moz-字首。

2.box-ordinal-group：value（正整數） 子元素之間的顯示方式，數值小的排前面，數值大的排後面

3.box-flex-group  目前暫未有瀏覽器支援

父與子元素除了上述屬性，還有其他重要的屬性，詳見part two

參考博文：張旭鑫部落格