新版弹性盒模型

弹性盒模型都是在父元素上加 

display: flex;          /*设置新版盒模型*/   

基础style样式

基础html

主轴方向、元素排序

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

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

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

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

style图

效果图

侧轴富余空间

align-items: flex-start;/*元素在侧轴开始位置，富余空间在侧轴的结束位置*/

align-items:flex-end;/*元素在侧轴结束位置，富余空间在侧轴的开始位置*/

align-items:center;/*元素在侧轴中间，富余空间在侧轴两侧*/

align-items:baseline;/*根据侧轴方向上文字的基线对齐*/

style图

效果图

元素弹性空间

flex-grow: 1;        （在子元素上加、他们平分父级的宽）

style图

效果图

元素具体位置设置

order: 2;            /*数字越小越靠前*/    （在子元素上加）

style图

效果图

主轴富余空间

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

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

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

justify-content:space-between;/*富余空间平分在两个元素中间*/

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

style图

效果图