box-flex兼容寫法
box-flex布局在這幾年發生了多次變化，可分為2009版、2011版以及2013版，
區分:
display:box(inline-box), box-{*}的格式為2009版
display:boxflex(inline-flexbox), flex()為2011版
display:flex(inline-flex), flex()為2013版，也是最新的版本
由此可見兼容寫法的復雜。。
三種版本分別由那些瀏覽器支持呢？
2009: 支持性最廣的一版: Chrome、Firefox2+、Safari3.1+（一部分屬於部分支持，得加上-webkit、-moz前綴）,但IE與opera完全不支持
2011:由IE10部分支持
2013:Chrome21+、Opera（Opera Mobile12.1+和Blackberry10+）
可查看以下兼容圖:
2009版本寫法
.box {
display: -webkit-box; /*兼容webkit內核瀏覽器，例如chrome與safari*/
display: -moz-box;/*兼容firefox*/
display: box;
}
.box>div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
註意:
1.flex元素若添加float、position屬性，將失去box-flex布局賦予其的寬高等屬性
2013寫法:
.box {
display: -webkit-flex; /*webkit內核*/
display: flex; /*兼容firefox、opera*/
}
.box >div {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
註意:
1.此寫法中子元素設置float無效，不影響原布局
為了追求更好地兼容性，我們一般會采用兼容寫法
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-boxflex;
display: -webkit-flex;
display: flex;
}
.div >div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-felx: 1;
width: 50%;
-webkit-flex: 1;
flex: 1;
}
註意:
新語法中沒有不要顯式設置寬度（width:50%）,但舊語法在部分老舊瀏覽器上會崩潰，因此最好加上。
兼容寫法支持情況:
- Chrome any
- Firefox any
- Safari any
- Opera 12.1+
- IE 10+
- iOS any
- Android any
box-flex兼容寫法