轉自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtml
display:flex 多欄多列布局瀏覽器支持情況：火狐直接支持w3c無前綴寫法，谷歌和opera支持-webkit- 前綴寫法，比較適合移動端開發使用，
display:flex 這個牛逼的css3布局屬性，遺憾的是只有谷歌和火狐支持，
中國人常用的手機上的瀏覽器幾乎全軍覆沒，UC瀏覽器不支持，安卓4.1.1和之前版本手機自帶的瀏覽器也不支持，微信自帶瀏覽器也不支持。
看來要留給兒子們用了。
示例:
html,body{ padding:0; margin:0;}
/*
flex-flow: row wrap; row橫向（左向右）顯示 column豎向（上向下）顯示 wrap一行顯示不完的時候換行
*/
.col{ border:red solid 1px;}
footer { height:300px;
display: -webkit-flex;
-webkit-flex-flow: row;
-webkit-align-items: stretch;
-webkit-justify-content:space-between;
/*IE10還不支持*/
display: -ms-flex;
-ms-flex-flow: row wrap;
-ms-align-items: stretch;
-ms-justify-content:space-between;
display: flex;
flex-flow: row;
align-items: stretch;
justify-content:space-between;
}
.col2{-webkit-flex:1;-moz-flex:1;flex:1}
display:flex 的HTML測試結構<footer>
<div class="col col1" style=" width:60px;">jquery特效</div>
<div class="col col2" style="">前端路上</div>
<div class="col col3" style="width:30px;">懶人建站</div>
</footer>
一個Flexbox布局是由一個伸縮容器(flex containers)和在這個容器里的伸縮項目(flex items)組成。
伸縮容器(flex containers)是一個HTML標簽元素，並且“display”屬性顯式的設置了“flex”屬性值。在伸縮容器中的所有子元素都會自動變成伸縮項目(flex items)。
這有一個三列布局的例子。外面的div容器是一個伸縮容器，而里面的left、main和right三個div都是伸縮項目：
設置一個簡單的伸縮容器很容易，代碼如下：
.container { display: flex;} 伸縮方向與換行(flex-flow)
伸縮容器有一個CSS屬性“flex-flow”用來決定伸縮項目的布局方式。如果伸縮容器設置了“flex-flow”值為“row”，伸縮項目排列由左向右排列：
如果“flex-flow”值設置為“column”，伸縮項目排列由上至下排列：
.container { display: flex; flex-flow: row;} 一個伸縮容器中的所有伸縮項目既可以排列在單行也可以多行排列。這個主要由“flex-flow”是否設置為“wrap”來決定。如果伸縮容器設置了“wrap”屬性值，當伸縮項目在伸縮容器中無法在一行中顯示的時候會另起一行排列。
.container { display: flex; flex-flow: row wrap;} 伸縮項目(flex items)
在伸縮容器中的所有子元素都將自動變成伸縮項目。沒有額外配置CSS的必要。你唯一需要的做的就是設置伸縮項目的尺寸。
如果伸縮容器把“flex-flow”設置為“row”后，伸縮項目將需要設置他們的寬度。伸縮項目的高度將會自動設置為伸縮容器的高度：
如果伸縮容器把“flex-flow”設置為“column”后，伸縮項目將需要設置他們的高度，伸縮項目的寬度將會自動設置為伸縮容器的寬度：
給伸縮項目設置“width”和“height”屬性來定義伸縮項目尺寸，而這個伸縮項目是獨立於其他伸縮項目。例如，如果我們給主內容(content)設置了一個600px的寬度，不管伸縮容器中有一個、兩個或者上百個伸縮項目，主內容的寬度都是600px。
如果你想伸縮項目根據伸縮容器剩余的空間來決定伸縮項目的寬度，你可以使用“flex”屬性。例如，我們可以告訴瀏覽器，左邊欄和右邊欄占用了伸縮容器減去主內容寬度的空間。
flex的值於對應的空間成正比。如果左邊欄設置了值為“1”和右邊欄設置了值為“2”，伸縮容器剩余的空間將按比例分配給左邊欄和右邊欄，並且右邊欄所占的空間是左邊欄的兩倍：
下面是示例中運用在伸縮項目上的一些代碼，展示了獨立寬度和按比例計算的寬度：
.main { width: 600px;}.left { flex: 1;}.right { flex: 2;} 完整的實例
這是一個很簡單的實例，Flexbox創建了一個經典的三列布局。主內容寬度為60%，而邊欄是使用“flex”屬性，按比例自動根據伸縮容器剩余空間計算得到對應的寬度：
HTML結構
… … …
CSS代碼
.container { display: flex; flex-flow: row;}.main { width: 60%;}.left { flex: 1;}.right { flex: 2;} 示例效果
