解决UC浏览器、微信浏览器使用display:flex;的兼容性问题

flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex 的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit，仅支持 display:box ），自主研发这东西也不好多说什么了，下面入正题。

首先还是从两个版本的语法开始讲吧，这里还是假设flex容器为 .box ，子元素为 .item 。

旧语法篇

定义容器的display属性

.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;
}

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

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

2.box-align 属性

box-align定义子元素交叉轴对齐方式。

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

box-align属性总共有5个值：

.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;
}

box-direction属性总共有3个值：

.box{
box-direction: normal | reverse | inherit;
/*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/
}

4.box-orient 属性

box-orient定义子元素是否应水平或垂直排列。