兼容浏览器版本Chrome21+Opera12.1+Firefox22+Safari6.1+IE10+浏览器支持最新flexbox规范：Chrome29+Firefox28+InternetExplorer11+Opera17+Safari6.1+(prefix-webkit-)Android4.4+iOS7.1+(prefix-webkit-)定义弹性布局框displaydisplay:-webkit-box;/旧版本语法：Safari、iOS、Android浏览器、旧版WebKit浏览器。/显示：-moz-box；/旧语法：Firefox（错误）/显示：-ms-flexbox；/混合语法：IE10/显示：-webkit-flex；/新语法：Chrome21+/显示：flex；/新版本语法：Opera12.1、Firefox22+/显示：-webkit-box；显示：-moz-box；显示：-ms-flexbox；显示：-webkit-flex；-方向-webkit-box-orient:vertical;-webkit-box-方向：正常；-moz-box-orient：垂直；-moz-box-方向：正常；:column;水平排列布局justify-content -webkit-justify-content:center; justify-content:center; -moz-box-pack:center; -webkit--moz-盒装：中心； 盒装：中心；垂直布局align-items align-items:center; -webkit-align-items:center; box-align:center; -moz-box-align:center; -webkit-box-align:center;拉伸框布局兼容flex box-flex:num; -webkit-box-flex:num; -moz-box-flex:num; flex:num; -webkit-flex:num;Summary/*flexflexbox布局兼容性样式文件*commonclass*display__flex*flex_direction__column*flex_wrap__wrap*justify_content__center*justify_content__space_between*justify_content__space_around*align_items__center*flex_grow__1*flex_shrink__0*/box/*在flex容器上设置的属性*/.display__displaydis{display:-webkit-box;/*flex-direction属性决定了主轴的方向（即item排列的方向）*/.flex_direction__row_reverse{-webkit-box-orient:水平;-webkit-box-方向：反向；-ms-flex-direction:行反转；flex-direction:row-reverse;}.flex_direction__column{-webkit-box-orient:vertical;-webkit-box-方向：正常；-ms-flex-方向：列；flex-direction:column;}.flex_direction__column_reverse{-webkit-box-orient:vertical;-webkit-box-方向：反向；-ms-flex-direction:column-reverse;flex-direction:column-reverse;}/*默认情况下，项目沿单行排列（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。*/.flex_wrap__nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.flex_wrap__wrap{-ms-flex-wrap:wrap;flex-wrap:wrap;}.flex_wrap__wrap_reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;}/*justify-content属性定义项目在主轴上的对齐方式。*/.justify_content__flex_start{-webkit-box-pack:开始;-ms-flex-pack：开始；调整内容：flex-start；}.justify_content__flex_end{-webkit-box-pack：结束；-ms-flex-pack：结束；证明内容：flex-end；}.justify_content__center{-webkit-box-pack：中心；-ms-flex-pack：中心；证明内容：居中；}.justify_content__space_between{-webkit-box-pack：证明；-ms-flex-pack：证明；证明内容：空间之间；}.justify_content__space_around{-ms-flex-pack：分发；justify-content:space-around;}/*align-items属性指定项目在交叉轴上如何对齐。*/.align_items__flex_start{-webkit-box-align:开始;-ms-flex-align:开始；align-items:flex-start;}.align_items__flex_end{-webkit-box-align:end;：结尾;align-items:flex-end;}.align_items__center{-webkit-box-align:center;-ms-flex-align:居中；对齐项目：中心；}.align_items__baseline{-webkit-box-align：基线；-ms-flex-align：基线；align-items:baseline;}/*align-content属性定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。*/.align_content__flex_start{-ms-flex-line-pack:开始;align-content:flex-start;}.align_content__flex_end{-ms-flex-line-pack:end;align-content:flex-end;}.align_content__center{-ms-flex-line-pack:center;align-content:center;}.align_content__space_between{-ms-flex-line-pack:justify;align-content:space-between;}.align_content__space_around{-ms-flex-line-pack:distribute;align-content:space-around;}/*flex项目设置的属性*//*order属性定义项目的排列顺序。值越小排名越高，默认为0。下面是兼容风格写法的例子，属性值可以根据需要修改。*/.order__1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}/*flex-grow属性定义item的放大比例，默认为0，即如果有多余的空间则不放大。下面是兼容风格的写法示例，属性值可以根据需要修改。*/.flex_grow__1{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;}/*flex-shrink属性定义item的缩小比例，默认为1，即如果空间不足，item会收缩。下面是兼容风格的写法示例，属性值可以根据需要修改。*/.flex_shrink__0{-ms-flex-negative:0;flex-shrink:0;}/*flex-basis属性定义了item在分配多余空间之前占据的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。下面是兼容风格的写法示例，属性值可以根据需要修改。*/.flex_basis__100px{-ms-flex-preferred-size:100px;flex-basis:100px;}/*align-self属性允许单个项目与其他项目有不同的对齐方式，它可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。*/.align_self__flex_start{-ms-flex-item-align:开始;align-self:flex-start;}.align_self__flex_end{-ms-flex-item-align:end;align-self:flex-end;}.align_self__center{-ms-flex-item-align:center;align-self:center;}.align_self__baseline{-ms-flex-item-align:基线;align-self:baseline;}Safari父元素设置为display:flex;没问题，但是子元素flex:1在safari中不可用！如果使用子元素，只能设置为flex:auto。如果要实现flex:1的效果，请使用：flex-grow:1;伸缩收缩：1；弹性基础：0；与这三个拆分元素相反，flex属性只是上述三个属性的复合简写。
