弹性盒模型

/*一、新版弹性盒模型*/

/*以下都写在父级元素上*/

display: flex;

/*设置主轴方向为水平方向*/

flex-direction: row;

/*设置主轴方向为垂直方向*/

flex-direction: column;

/*设置主轴方向为水平，元素排列为反序*/

flex-direction: row-reverse;

/*设置主轴方向为垂直，元素排列为反序*/

flex-direction: column-reverse;

/* 1. 主轴方向富裕空间管理 */

/*元素在主轴开始位置，富裕空间在主轴的结束位置*/

justify-content: flex-start;  

/*元素在主轴结束位置，富裕空间在主轴的开始位置*/

justify-content: flex-end;

/*元素在主轴中间，富裕空间在主轴的两侧*/

justify-content: center;

/*富裕空间平均分配在每两个元素之间*/

justify-content: space-between;

/*富裕空间平均分配在每个元素两侧*/

justify-content: space-around;

/* 2. 侧轴方向富裕空间管理 */

/*元素在侧轴开始位置，富裕空间在侧轴的结束位置*/

align-items: flex-start;

/*元素在侧轴结束位置，富裕空间在侧轴的开始位置*/

align-items: flex-end;

/*元素在侧轴中间，富裕空间在侧轴的两侧*/

align-items: center;

/*根据侧轴方向上文字的基线对齐*/

align-items: baseline;

/*以下都写在子级元素上*/

/*1. 定义盒子的弹性空间*/

/*

计算公式：  

子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

*/

flex-grow: 1;

/*2. 设置元素的具体位置*/

/*数值越小越靠前，可以接受0 或者 负值*/

order: 1;

/*二、旧版弹性盒模型*/

/*以下都写在父级元素上*/

display: -webkit-box;

/*设置主轴方向为水平方向*/

-webkit-box-orient: horizontal;

/*设置主轴方向为垂直方向*/

-webkit-box-orient: vertical;

/*元素在主轴上排列为反序*/

-webkit-box-direction: reverse;

/*元素在主轴上排列为正序*/

-webkit-box-direction: normal;

/* 1. 主轴方向富裕空间管理 */

/*元素在主轴开始位置，富裕空间在主轴的结束位置*/

-webkit-box-pack: start;

/*元素在主轴结束位置，富裕空间在主轴的开始位置*/

-webkit-box-pack: end;

/*元素在主轴中间，富裕空间在主轴的两侧*/

-webkit-box-pack: center;

/*富裕空间平均分配在每两个元素之间*/

-webkit-box-pack: justify;

/* 2. 侧轴方向富裕空间管理 */

/*元素在侧轴开始位置，富裕空间在侧轴的结束位置*/

-webkit-box-align: start;

/*元素在侧轴结束位置，富裕空间在侧轴的开始位置*/

-webkit-box-align: end;

/*元素在侧轴中间，富裕空间在侧轴的两侧*/

-webkit-box-align: center;

/*以下都写在子级元素上*/

/*1. 定义盒子的弹性空间*/

-webkit-box-flex: 1;

/*2. 设置元素的具体位置*/

/*数值越小越靠前，最小值默认处理为1*/

-webkit-box-ordinal-group: 1;