flex的兼容

父容器的 display 属性：

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

子元素对齐方式：

a. 水平居中

.box{
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

b. 垂直居中

.box{
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

子元素的显示方向：

a. 从左到右

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

b. 右到左

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

c. 上到下

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

d. 下到上

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

子元素放大：

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

@mixin box($val:horizontal) {

//vertical

display: -webkit-box;

display: -moz-box;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flexbox;

display: flex;

@if $val == horizontal {

-webkit-box-orient:horizontal;

-webkit-box-direction:normal;

-moz-box-orient:horizontal;

-moz-box-direction:normal;

flex-direction:row;

-webkit-flex-direction:row;

} @else {

-webkit-box-orient:vertical;

-webkit-box-direction:normal;

-moz-box-orient:vertical;

-moz-box-direction:normal;

flex-direction:column;

-webkit-flex-direction:column;

}

}

@mixin flex($val:1) {

-webkit-box-flex:$val;

-moz-box-flex:$val;

-ms-box-flex:$val;

-o-box-flex:$val;

box-flex:$val;

-webkit-flex:$val;

-moz-flex:$val;

-ms-flex:$val;

-o-flex:$val;

flex:$val;

}