很久不写博文，之前的长时间不上都关闭了，但随着工作时间长越来越长，对知识的积累和总结还真的是很重要的。所以奉劝码农们每天都还是要抽出来一点时间总结点东西，以后对你受益匪浅！！今天还是变谈CSS3里的flex怎么处理兼容的

flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了，虽然现在低版本浏览器不支持，可是对于移动来说兼容性不是问题，可是在安卓4.3以后版本里。那就不好用了，今天咱们就说下如果写flex才能保证兼容性。

flex之所以有兼容性。是因为w3c从09到现在更新了很多次，所以有一些浏览器只是支持旧语法的书定方式，flex属性有很多种，今天主要说常用的等比设置和居中这两块

一、旧语法

.box{display:-moz-box;/*Firefox*/display:-webkit-box;/*Safari,Opera,Chrome*/display:box;}

2.容器属性

1)box-packbox-pack属性总共有4个值：

.box{box-pack:start|end|center|justify;/*主轴对齐：左对齐（默认）|右对齐|居中对齐|左右对齐*/}

3.子元素属性

box-flex 属性：

.item{-moz-box-flex:1.0;/*Firefox*/-webkit-box-flex:1.0;/*Safari,Opera,Chrome*/box-flex:1.0;}

二、新语法

1.容器的display属性

.item{-moz-box-flex:1;/*Firefox*/-webkit-box-flex:1;/*Safari,Opera,Chrome*/box-flex:1;}.box{/*行内flex*/display:-webkit-inline-flex;/*webkit*/display:inline-flex;}

2.容器样式

.box{flex-direction:row|row-reverse|column|column-reverse;/*主轴方向：左到右（默认）|右到左|上到下|下到上*/flex-wrap:nowrap|wrap|wrap-reverse;/*换行：不换行（默认）|换行|换行并第一行在下方*/flex-flow:<flex-direction>||<flex-wrap>;/*主轴方向和换行简写*/justify-content:flex-start|flex-end|center|space-between|space-around;/*主轴对齐方式：左对齐（默认）|右对齐|居中对齐|两端对齐|平均分布*/align-items:flex-start|flex-end|center|baseline|stretch;/*交叉轴对齐方式：顶部对齐（默认）|底部对齐|居中对齐|上下对齐并铺满|文本基线对齐*/align-content:flex-start|flex-end|center|space-between|space-around|stretch;/*多主轴对齐：顶部对齐（默认）|底部对齐|居中对齐|上下对齐并铺满|上下平均分布*/}

3.子元素属性

.item{order:<integer>;/*排序：数值越小，越排前，默认为0*/flex-grow:<number>;/*default0*//*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/flex-shrink:<number>;/*default1*//*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/flex-basis:<length>|auto;/*defaultauto*//*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]/*flex-grow,flex-shrink和flex-basis的简写，默认值为01auto，*/align-self:auto|flex-start|flex-end|center|baseline|stretch;/*单独对齐方式：自动（默认）|顶部对齐|底部对齐|居中对齐|上下对齐并铺满|文本基线对齐*/}

兼容写法：

1.盒子的兼容写法

.box{display:-webkit-box;/*老版本语法:Safari,iOS,Androidbrowser,olderWebKitbrowsers.*/display:-moz-box;/*老版本语法:Firefox(buggy)*/display:-ms-flexbox;/*混合版本语法:IE10*/display:-webkit-flex;/*新版本语法:Chrome21+*/display:flex;/*新版本语法:Opera12.1,Firefox22+*/}

2.子元素的兼容写法：

.flex1{-webkit-box-flex:1/*OLD-iOS6-,Safari3.1-6*/-moz-box-flex:1;/*OLD-Firefox19-*/-webkit-flex:1;/*Chrome*/-ms-flex:1/*IE10*/flex:1;/*NEW,Spec-Opera12.1,Firefox20+*/}

我要说的主要部分来了。。

这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的，所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下，个别不兼容的移动设置才会识别，哪些是旧的语法，你懂的。那些带box的一定要写在最下面即可。所以上面的兼容写法应该是这样的才对

.box{display:-webkit-flex;/*新版本语法:Chrome21+*/display:flex;/*新版本语法:Opera12.1,Firefox22+*/display:-webkit-box;/*老版本语法:Safari,iOS,Androidbrowser,olderWebKitbrowsers.*/display:-moz-box;/*老版本语法:Firefox(buggy)*/display:-ms-flexbox;/*混合版本语法:IE10*/}

.flex1{-webkit-flex:1;/*Chrome*/-ms-flex:1/*IE10*/flex:1;/*NEW,Spec-Opera12.1,Firefox20+*/-webkit-box-flex:1/*OLD-iOS6-,Safari3.1-6*/-moz-box-flex:1;/*OLD-Firefox19-*/}

如果你不把握好这个先后顺序，总是调整不出来完整的兼容样式。