flex的基本使用

//flex-direction:用于设置主轴方向，通过设置坐标轴可以规定项目的排列方向

row:默认值，主轴在水平方向从左向右，项目按照主轴方向从左到右排列
row-reverse:主轴是row的反方向。项目按照主轴方向从右向左排列
column：主轴在垂直方向从上而下，项目按照主轴方向从上往下排列
column-reverse:主轴是column的反方向，项目按照主轴方向从下往上排列

//justify-content：用于设置项目在主轴方向上的对齐方式，以及分配项目之间及其周围多余的空间
flex-start：默认值，表示项目对齐的主轴起点，项目不留空隙
center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离（居中）
flex-end：项目对齐主轴终点，项目间不留空隙
space-between：项目间距相等，第一个和最后一个项目分别离起点/终点的距离为0
space-around：第一个项目分别离主轴七点和最后一个项目离终点的距离为中间项目间距的一半
align-items：用于设置项目在行中的对齐方式
stretch：默认值，未设置项目尺寸时将项目拉伸至填满交叉轴，
flex-start：项目顶部与交叉轴起点对齐，
center：项目交叉轴居中对齐
flex-end：项目底部与交叉轴终点对齐

//align-content：用于多行排列时设置项目在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余空间
stretch：默认值，未设置项目尺寸时将各行中的项目拉伸至填满交叉轴，当设置了项目尺寸时项目尺寸不变，项目拉伸至交叉轴
flex-start：首行在交叉抽起点开始排列，行间不留间距，首行离交叉轴起点和行尾离交叉轴终点的距离相等
center：行在交叉轴终点开始排列，行间不留间距，首行离交叉轴起点和行尾离交叉轴终点距离相等
flex-end：尾行在交叉终点开始排列，行间不留间距
space-around：行与行间距相等，首行离交叉轴起点和尾行交叉轴终点距离为尾行间距一半
space-between：行间间距，首行交叉轴起点和尾行交叉轴终点的距离相等

//flex-wrap：用于规定项目是否换行，以及多行排列时换行方向
nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩
wrap：当容器单行容不下所有项目时允许项目换行排列
wrap-reverse：当容器单行容不下所有项目时允许项目换行排列，换行方向为wrap的反方向**