弹性盒模型

1作用

多用于移动端布局

在弹性盒模型中float，clear，vertical不生效

2父元素上的属性

1）开启弹性盒模型

display：flex；

父元素开启弹性盒模型，子元素水平排列

2）设置弹性盒的方向

flex:direction:row|column|row-reverse|column-reverse;

row:默认值   子元素从左往右水平排列

column:   子元素从上往下垂直排列

row-reverse:   子元素从右往左水平排列

column:   子元素从下往上垂直排列

3)设置子元素在主轴的对齐方式

子元素水平排列，x轴为主轴，Y轴为侧轴；子元素垂直排列，Y轴为主轴，x轴为侧轴

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：默认值   弹性盒的开始

flex-end：弹性盒的结束

center：居中

space-between在子元素之间平均分配父元素剩余的距离

space-around在子元素四周平均分配父元素剩余的距离

4）弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start | flex-end | center

flex-start：默认值   弹性盒的开始

flex-end：弹性盒的结束

center：居中

3子元素上的属性

flex-grow:number;

子元素分配父元素剩余距离的比例