-webkit-box

父容器

display: flex;
justify-content: center;/*主轴*/
align-items: center; /*交叉轴*/

display: -webkit-box;
-webkit-box-pack: center;/*主轴*/
-webkit-box-align: center;/*交叉轴*/

-webkit-box-pack: justify;   /*主轴 最左的靠最左，最右的靠最右*/

display: -webkit-box;
-webkit-box-orient:horizontal; /*默认水平排列，horizontal | vertical | inherit;*/
-webkit-box-pack:start; /*start end center justify 主轴方向*/
-webkit-box-align:stretch; /*start | end | center | baseline | stretch; 交叉轴*/

子容器

-webkit-box-flex:1.0;     /*占剩下空间的所有*/

用于父元素的样式：

display: -webkit-box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代）

-webkit-box-orient:horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。

-webkit-box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列

-webkit-box-align:start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排

用于子元素的样式

   box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。