flex布局
通过给父盒子添加flex属性，来控制盒子的位置和排序方式
给父亲添加的属性
flex-direction 设置主轴方向（纵横）
默认值：row：从左到右 row-reverse：从右到左 column：从上到下 column-reverse从上到下
justify-content 设置主轴上的子元素的排列方式（多行）
默认值：flex-start默认值从头部开始如果是横轴从左到右 flex-end从尾部开始排列
center从主轴居中对齐如果横轴则是水平居中 space-around 评分剩余空间 space-between先两边贴边，在评分剩余空间
flex-wrap 设置子元素是否换行 默认不换行的，如果装不开会缩小子元素的宽度，拼凑进去
nowrap不换行 wrap换行
align-items:设置侧轴上的子元素排列方式（单行，只要不换行不管横竖）
flex-start默认值从上到下 flex-end从下到上 center 挤在一起居中（垂直居中）stretch拉伸
align-content 设置侧轴上的子元素排列方式（多行，适用于出现换行的情况下）
flex-start从上到下 flex-end从下到上 center侧轴居中 space-around子项平分剩余空间 space-between先两边贴边 stretch设置子项元素高度平分父元素高度
flex-flow 符合属性，相当于同时设置了 flex-direction和flex-wrap
沿着主轴方向是否换行换列
flex-flow:row wrap; flex-flow:column wrap
子项添加的属性
flex子项目占的份数（定义子项目分配剩余空间，用flex来表示占多少份数）
.item{ flex: <1>; /*里面数字几就是分成几份*/ }
align-self控制子项自己在侧轴的排列方式
span:nth-child(3){ //让某一个单独的元素列下来 align-self: flex-end; }
order属性定义子项的排序顺序（前后顺序）数值越小越靠前默认为0 和z-index不一样
span:nth-child(2){ //更换位置 order: -1; }
