弹性布局flex

开启弹性布局
display:flex;
设置主轴方向从上往下排列
flex-direction：column;
设置主轴方向 默认值为row
flex-direction：row;
设置主轴方向为竖轴 从上往下进行排列
flex-dirction：column;
设置主轴方向为竖轴,从下往上进行排列;
flex-dirction：column-reverse
项目在主轴方向的对齐方式,默认为 flex -start 主轴开始进行布局
justify-content:flex-start;
项目从左往右依次排列,整体右对齐
justify-content:flex-end;
项目从左往右依次排列,整体中对齐
justify-content:center;
项目从左往右依次排列,整体两端留白(项目间隔的一般),每个项目之间的间隔也是一样的
justify-content：space-around;
项目从左往右依次排列,整体两端对齐,没有留白,项目间隔相同.
justify-content：space-between;

交叉轴 垂直于主轴的轴
align-items 设置项目在交叉轴的对齐方式
flex-start 默认值
flex-end 指的是结束的位置
flex-center 垂直居中
stretch 如果项目未设置高度,则拉伸为容器同等高度
baseline 项目基线对齐
align-items:center;
默认nowrap 不换行 情况下,一行之内放不下所有的项目,会将项目进行压缩,不会进行自动换行
wrap 换行 从flex-start 向flex-end 进行换行,多出来的部分放在下面
wrap-reverse进行换行，多出来的行放在上面
flex-wrap：wrap

项目
order:-1
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
设置放大
flex-grow:1;
压缩
flex-shrink: 默认1 当容器没有设置换行并且一行内显示不下标签,项目默认会被压缩
值为0表示项目不被压缩
align-self 单独设置某个项目的对齐方式,这个值可以覆盖容器当中的align-self
algin-self:flex-start
algin-self:flex-end
algin-self:center