新版弹性盒模型
display: flex;
flex-direction
设置主轴方向为水平方向flex-direction: row;
设置主轴方向为垂直方向flex-direction: column;
设置主轴方向为水平,元素排列为反序flex-direction: row-reverse;
设置主轴方向为垂直,元素排列为反序flex-direction: column-reverse;
####justify-content
元素在主轴开始位置 ，富裕空间在主轴的结束位置justify-content: flex-start;
元素在主轴结束位置，富裕空间在主轴开始位置justify-content: flex-end;
元素在主轴中间,富裕空间在主轴两侧justify-content: center;
富裕空间平均分配在每两个元素之间justify-content: space-between;
富裕空间平均分配在每个元素两侧justify-content: space-around;
align-items
元素在侧轴开始位置，富裕空间在侧轴结束位置align-items: flex-start;
元素在侧轴结束位置，富裕空间在侧轴开始位置align-items: flex-end;
元素在侧轴中间位置，富裕空间在侧轴两侧align-items: center;
根据侧轴方向上文字的基线对齐align-items: baseline;
定义盒子的弹性空间
子级设置 flex-grow
元素的具体位置设置
子级设置 order
老版弹性盒模型
display: -webkit-box;
-webkit-box-orient
设置主轴方向为水平方向-webkit-box-orient: horizontal;
设置主轴方向为垂直方向-webkit-box-orient: vertical;
元素在主轴上排列为反序-webkit-box-direction: reverse;
元素在主轴上排列为正序-webkit-box-direction: normal;
元素在主轴的开始位置,富裕空间在主轴的结束位置-webkit-box-pack: start;
-webkit-box-pack
元素在主轴结束位置，富裕空间在主轴开始位置-webkit-box-pack: end;
元素在主轴中间,富裕空间在主轴两侧-webkit-box-pack: center;
富裕空间平均分配在每两个元素之间-webkit-box-pack: justify;
-webkit-box-align
元素在侧轴开始位置，富裕空间在侧轴结束位置-webkit-box-align: start;
元素在侧轴结束位置，富裕空间在侧轴开始位置-webkit-box-align: end;
元素在侧轴中间位置，富裕空间在侧轴两侧-webkit-box-align: center;
定义盒子的弹性空间
子级设置 -webkit-box-flex
元素的具体位置设置
子级设置 -webkit-box-ordinal-group