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-flex: 1;
width: 50%;
-webkit-flex: 1;
flex: 1;
注意:新語法中沒有必要顯式設定寬度（width:50%）,但舊語法在部分老舊瀏覽器上會崩潰，因此最好加上。
相容寫法支援情況:
相容Arc寫法
在最新版的xcode的iphone開發中，新增了objective c automatic reference count 功能，自動管理指標物件的記憶體管理，無需專門寫相應物件宣告autorelease，retain物件的釋放等等。arc forbids explicit message send...
js相容寫法
新增事件方法 addhandler function element,type,handler elseif element.attachevent else 移除之前新增的事件方法 removehandler function element,type,handler elseif element...
透明相容寫法
針對ie透明寫法 ms filter progid dximagetransform.microsoft.alpha opacity 50 filter alpha opacity 50 opacity透明相容所有瀏覽器寫法 若有背景色background color與文字內容存在情況下，應用下面樣...