弹性盒模型

1.容器属性
需要利用display:flex;定义一个容器为弹性盒模型
2.flex-direction
通过该属性可以定义容器内item主轴的方向，items就会沿着主轴排列。弹性盒模型是单方向布局模式。
flex-direction:row | row-reverse | column | colum-reverse
row :横向正向排列
row-reverse:横向反向排列
column:纵向正向排列
column-reverse:纵向反向排列
3.flex-wrap
flex-wrap:nowrap | warp | wrap-reverse
nowrap(默认)不换行； wrap:换行： wrap-reverse:换行反向
4.flex-flow:
他是flex-wrap和flex-direction两个属性的缩写，默认属性是 row nowrap;
flex-flow:row nowrap  用法
5.justify-content
理解为水平主轴的排列方式
just-content:flex-start | flex-end | center | space-between | space-around

flex-start:左对齐根据主轴方向
flex-end:右对齐根据direction
center:水平线中间居中
space-between:主轴主轴方向，等间距排列，首末盒子与父盒子相距为0
space-around:主轴方向，等间距排列，首末组件与父组件相距1/2个间距
6.align-items
沿着次轴（主轴交叉轴，例如主轴是x轴，次轴就是y轴）的排列方式，

align-items:stretch | flex-start | flex-end | center | baseline 
align-items:stretch 默认值，永远保持侧轴拉伸项目
如果侧轴是垂直方向，如果项目没有设置高度，则会拉伸至父级盒子的高度，反之x轴拉伸宽度|
flex-start:侧轴开始点。flex-end:侧轴结束点
center:居中
baseline：与他们的基线对齐文字基线对齐
7.align-content
同样是针对次轴进行排列的，针对超出两行有效果。
align-content:lex-start | flex-end | center | space-between | space-around
2.2item 属性
1.order:

决定容器里面的items排序，order越大越往后
2.flex-grow
扩展自己的尺寸，定义flex容器中item自身可以占用的尺寸
如果都设置1，容器中的item，那么空间大小是平均的，如果有一个设置为2，他将会占有其他的item空间的2倍。
3.flex-shrink
属性定义了一个item可用缩小的能力
flex-shrink:0
4.flex-basis
属性定义一个元素在剩余空间，进行分配之前的默认尺寸。
flex-basic:200rpx
5.align-self
 

属性用于单个item覆盖容器的默认排列方式
align-self:auto | flex-start | flex-end | center