-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 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。