flexbox兼容写法

旧语法篇

/* 兼容写法 */
.container{
    display:-webkit-box;
    display:box;
    display-webkit-flex;
    display:flex;
}

/*子元素主轴对齐方式*/
.container{
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
}
/*旧语法*/
/*box-pack: start | end | center | justify;*/


/*子元素交叉轴对齐方式*/
.container{
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/*旧语法*/
/*box-align: start | end | center | baseline | stretch;*/


/*右到左*/
.container{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/*下到上*/
.container{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*是否允许子元素伸缩*/
.item{
    -webkit-box-flex: 1.0;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

/*子元素的显示次序*/
.item{
    -webkit-box-ordinal-group: 1;
    -webkit-order: 1;
    order: 1;
}