• flex布局教程

• flex布局分为旧版本dispaly: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以不同版本浏览器肯定存在兼容问题。

  Android
  2.3 开始就支持旧版本 display:-webkit-box;
  4.4 开始支持标准版本 display: flex;
  IOS
  6.1 开始支持旧版本 display:-webkit-box;
  7.1 开始支持标准版本display: flex;
  PC
  ie10开始支持，但是IE10的是-ms形式的。

• 盒子的兼容性写法

在低版本安卓系统中。因为所有都是向下兼容的，需要把旧语法写在底下个别不兼容的移动设置才会识别，那些带box的一定要写在最下面。

.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   

 }

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

盒模型（支持所有控件）
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}