flex是一个非常好用的属性。如果说有什么可以完全替代float和position的话，那一定是它了（虽然现在还有很多浏览器不支持flex.device）。但是国内很多浏览器对Flex的支持不是很好。这里提供一套兼容微信内置浏览器的写法。我们开始谈正事吧。首先，让我们从两个版本的语法开始。这里我们仍然假设flex容器是.box，子元素是.item。旧语法定义容器的显示属性。box{display:-moz-box;/*Firefox*/display:-webkit-box;/*Safari,Opera,Chrome*/display:box;}容器属性1。box-pack属性box-pack定义了子元素的主轴对齐方式。.box{-moz-box-pack:center;/*Firefox*/-webkit-box-pack:center;/*Safari,Opera,Chrome*/box-pack:center;}里面有4个box-pack属性totalValue:.box{box-pack:start|end|center|justify;/*主轴对齐方式：左对齐（默认）|右对齐|居中对齐|左对齐*/}2.box-align属性box-aligndefiner元素交叉轴对齐。.box{-moz-box-align:center;/*Firefox*/-webkit-box-align:center;/*Safari,Opera,Chrome*/box-align:center;}里面有5个box-align属性totalValue:.box{box-align:start|end|center|baseline|stretch;/*横轴对齐方式：顶部对齐（默认）|底部对齐|居中对齐|文本基线对齐|上下对齐和全*/}3.box-direction属性box-direction定义了子元素的显示方向。.box{-moz-box-direction:reverse;/*Firefox*/-webkit-box-direction:reverse;/*Safari,Opera,Chrome*/box-direction:reverse;}里面有3个box-direction属性totalValue:.box{box-direction:normal|reverse|inherit;/*显示方向：defaultdirection|reverse|inheritbox-directionofchildelements*/}4.box-orient属性box-orient定义子元素是否应该水平或垂直排列。.box{-moz-box-orient:horizo??ntal;/*Firefox*/-webkit-box-orient:horizo??ntal;/*Safari,Opera,Chrome*/box-orient:horizo??ntal;}里面有5个box-orient属性totalValue:.box{box-orient:horizo??ntal|vertical|inline-axis|block-axis|inherit;/*排列方向：horizo??ntal|vertical|inlinearrangement(default)|blockarrangement|inheritparent'sbox-orient*/}5.box-lines属性box-lines定义了当子元素超出容器时是否允许子元素换行。.box{-moz-box-lines:multiple;/*Firefox*/-webkit-box-lines:multiple;/*Safari,Opera,Chrome*/box-lines:multiple;}里面有2个box-lines属性totalValue:.box{box-lines:single|multiple;/*Allownewlines:notallowed(default)|allowed*/}子元素属性1.box-flex属性box-flex定义当前子元素是否允许伸展。.item{-moz-box-flex:1.0;/*Firefox*/-webkit-box-flex:1.0;/*Safari,Opera,Chrome*/box-flex:1.0;}box-flex属性使用浮点数value:.item{box-flex:;/*scale:<一个浮点数，默认0.0，表示不可伸缩，大于0的值可伸缩，灵活性相对>*/}2.box-ordinal-group属性box-ordinal-group定义了子元素的显示顺序，值越小，排名越高。.item{-moz-box-ordinal-group:1;/*Firefox*/-webkit-box-ordinal-group:1;/*Safari,Opera,Chrome*/box-ordinal-group:1;}box-direction属性使用整数值：.item{box-ordinal-group:;/*显示顺序：<整数，默认为1，值越小，排名越高>*/}新增语法定义容器的显示属性.box{display:-webkit-flex;/*webkit*/display:flex;}/*inlineflex*/.box{display:-webkit-inline-flex;/*webkit*/display:inline-flex;}Containerstyle.box{flex-direction:row|row-reverse|column|column-reverse;/*主轴方向：从左到右（默认）|从右到左|从上到下|从下到上*/flex-wrap:nowrap|wrap|wrap-reverse;/*wrap:nowrap(default)|wrap|wrapand***linebelow*/flex-flow:||;/*主轴方向和换行速记*/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;/*多轴对齐：顶部对齐（默认）|底部对齐|中心对齐|上下对齐和铺装|上下均匀分布*/}子元素attribute.item{order:;/*排序：值越小，排名越高，默认为0*/flex-grow:;/*default0*//*放大：默认0（即如果还有空间，则不放大，如果值为1，则放大，2为两倍大小of1,依此类推)*/flex-shrink:;/*default1*//*shrink:默认1（如果空间不够就收缩，如果值为0则不收缩)*/flex-basis:|auto;/*defaultauto*//*FixedSize:默认为0，可以设置px值，也可以设置百分比大小*/flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]/*flex-grow、flex-shrink和flex-basis的简写，默认值为01auto，*/align-自我：自动|弹性开始|弹性结束|中心|基线|拉伸；/*单独对齐：自动（默认）|顶部对齐|底部对齐|居中对齐|上下对齐展开|文本基线对齐*/}兼容写法首先定义容器的显示属性：.box{display:-webkit-box;/*旧版本语法：Safari,iOS,Androidbrowser,oldWebKitbrowsers.*/display:-moz-box;/*旧版本语法：Firefox(buggy)*/display:-ms-flexbox;/*混合版本语法：IE10*/display:-webkit-flex;/*新版本语法：Chrome21+*/display:flex;/*新版本语法：Opera12.1,Firefox22+*/}因为旧版本语法没有包含在W3C标准，这里不需要写display:box，下面的语法也是一样这里需要注意的是，如果子元素是行内元素，很多时候需要用display:block或者display:inline-block把内联子元素变成块元素（比如使用box-flex属性），这也是和旧语法的区别之一和新语法。sub-elements.box的主轴对齐{-webkit-box-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;}这里旧语法有4parameters,新版文法有5个参数，没有兼容新版文法的space-around:.box{box-pack:start|end|center|justify;/*Spindlealignment:left对齐（默认）|右对齐|Aligncenter|alignleft/right*/justify-content:flex-start|flex-end|center|space-between|space-around;/*主轴对齐：左对齐（默认）|右对齐|中心对齐|对齐|均匀分布*/}子元素横轴alignment.box{-webkit-box-align:center;-moz-align-items:center;-webkit-align-items:center;align-items:center;}这里另外写法不同，参数其实是同一个函数：.box{box-align:start|end|center|baseline|stretch;/*横轴对齐方式：顶对齐（默认）|底对齐|居中对齐|文本基线对齐|上下对齐并展开*/align-items:flex-start|flex-end|center|baseline|stretch;/*横轴对齐：顶部对齐（默认）|底部对齐|居中对齐|上下对齐和layFull|text基线对齐*/}子元素的显示方向子元素的显示方向可以是通过box-direction+box-orient+flex-direction实现，请看下面的例子：lefttorightbox{-webkit-box-direction:normal;-webkit-box-orient:horizo??ntal;-moz-flex-direction:行;-webkit-flex-direction:row;flex-direction:row;}从右到左.box{-webkit-box-pack:end;-webkit-box-direction:reverse;-webkit-box-orient:horizo??ntal;-moz-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}这是一个额外的注意事项：box-directioninboxwritingjustchangesthechild元素的排序不会改变对齐方式。需要添加一个新的box-pack来改变从上到下的对齐方式。box{-webkit-box-direction:normal;-webkit-box-orient:vertical;-moz-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;}downtoup.box{-webkit-box-pack:end;-webkit-box-direction:reverse;-webkit-box-orient:vertical;-moz-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;}子元素是否允许stretch.item{-webkit-box-flex:1.0;-moz-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;}.item{-webkit-box-flex:1.0;-moz-flex-shrink:1;-webkit-flex-shrink:1;flex-shrink:1;}上面是允许放大，在box语法中，如果box-flex不为0，表示允许子元素拉伸，flex是分开的。上面的flex-grow是允许放大的（默认Notallowed），下面的flex-shrink是允许缩小的（默认是允许的）。box-flex的默认值为0，也就是说默认情况下在两种浏览器中的表现是不同的：这里还有一点，就是新旧语法的算法不同，假设box-flex的值不等于0。在旧语法中，如果有多余的空格，box-flex的值越大，空白部分的比例越大，反之亦然：在新版语法中，放大比例直接根据flex-grow的值赋值，flex-grow的缩放会覆盖flex-shrink:0，看例子：parameter:.item{box-flex:;/*stretch:<一个浮点数，默认0.0，表示不可伸缩，大于0的值可伸缩，灵活性相对>*/flex-grow:;/*default0*//*放大：默认0（即有剩余空间则不放大，值为1）放大，2为1的两倍大小，以此类推）*/flex-shrink:;/*default1*//*shrink:default1（如果空间不够就收缩，值为0则不收缩）*/}子元素的显示顺序.item{-webkit-box-ordinal-group:1;-moz-order:1;-webkit-order:1;order:1;}不足之处请多多指教。
