一、css3彈性盒是什麼？
一種提供響應式布局的解決方案，與傳統的css2盒模型在子元素表現上有很大不同。具體不同是在盒子會自動隨著外部元素的寬度或者裝置寬度不同而動態分配寬度。
二、布局結構：父元素+n個子元素
1.display:flex 宣告彈性盒布局
2. box-orient（horizontal|vertical）宣告內部子元素的排列方向
3.box-lines(single|multiple) 子元素布局是否自動換行 chrome firfox 暫不支援multiple
4.box-pack(start|center|end|justify) 相對子元素之間的水平排列方式，可以想象ps裡的圖層水平居中的功能，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
參考博文：張旭鑫部落格
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。1 2 335 36 37 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。38 示...
CSS3彈性盒布局總結（二）
昨天發現flex屬性的總結 一 裡的屬性和w3cschool裡的flex屬性有很多都是重複的功能。今天翻了一篇w3cplus裡的一篇文章 戳這裡，發現其實是flex語法的兩個不同的版本。昨天那個比較老，今天總結的是最新的語法標準。父元素的屬性有 display flex 父元素及子元素使用彈性盒布局...