弹性盒模型新老属性对比

/*新版弹性盒模型*/
display: flex;

/*设置主轴方向为水平方向*/
flex-direction: row;

/*设置主轴方向为垂直方向*/
flex-direction: column;

/*设置主轴方向为水平,元素排列为反序*/
flex-direction: row-reverse;

/*设置主轴方向为垂直,元素排列为反序*/
flex-direction: column-reverse;

/*元素在主轴开始位置 ，富裕空间在主轴的结束位置*/
justify-content: flex-start;

/*元素在主轴结束位置，富裕空间在主轴开始位置*/
justify-content: flex-end;

/*元素在主轴中间,富裕空间在主轴两侧*/
justify-content: center;

/*富裕空间平均分配在每两个元素之间*/
justify-content: space-between;

/*富裕空间平均分配在每个元素两侧*/
justify-content: space-around;

/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
align-items: flex-start;
                
/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
align-items: flex-end;
                
/*元素在侧轴中间位置，富裕空间在侧轴两侧*/
align-items: center;
                
/*根据侧轴方向上文字的基线对齐*/
align-items: baseline;

/*新版子元素弹性空间*/
flex-grow: 1;

/* 新版子元素位置，数值越小越靠前，可以接受0 或者负值 */
order:1;

/*老版弹性盒模型*/
display: -webkit-box;

/*设置主轴方向为水平方向*/
-webkit-box-orient: horizontal;

/*设置主轴方向为垂直方向*/
-webkit-box-orient: vertical;

/*元素在主轴上排列为反序*/
-webkit-box-direction: reverse;

/*元素在主轴上排列为正序*/
-webkit-box-direction: normal;

/*元素在主轴的开始位置,富裕空间在主轴的结束位置*/
-webkit-box-pack: start;
                
/*元素在主轴结束位置，富裕空间在主轴开始位置*/
-webkit-box-pack: end;
                
/*元素在主轴中间,富裕空间在主轴两侧*/
-webkit-box-pack: center;
                
/*富裕空间平均分配在每两个元素之间*/
-webkit-box-pack: justify;

/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
-webkit-box-align: start;
                
/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
-webkit-box-align: end;
                
/*元素在侧轴中间位置，富裕空间在侧轴两侧*/
-webkit-box-align: center;

/*老版子元素弹性空间*/
-webkit-box-flex:1;

/* 老版子元素位置，数值越小越靠前， 最小值默认处理为1 */
-webkit-box-ordinal-group:1;