一、Flex布局是什么？
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
弹性盒子：flex布局 1.弹性盒子是一种布局方式 2.特点：改变盒子的排列方式
采用flex布局的元素，称为flex容器 ，它的所有子元素自动成为容器成员，称为flex项目
在没有flex布局之前因为div是一个块级元素独占一行
这样会使页面的布局很难放在一起：这时flex布局就起到了做用
首先将父元素转化成弹性盒子，这样子盒子就会默认占一行：display:flex;
flex布局中的flex-direction:主轴，交叉轴方向：定义弹性元素的排列方向及顺序 flex-direction里面的值来定义主轴和交叉轴
flex-direction:row; 默认值，表示主轴是水平方向
flex-direction：row-reverse ;表示主轴是水平反向 当给父元素设置成水平反向就会得到以下效果
flex-direction：column;表示主轴是垂直正向 当给父元素设置成垂直正向就会得到以下效果
flex-direction：column-reverse;表示主轴是垂直反向 当给父元素设置成垂直反向就会得到以下效果
定义是否换行，及换行方式：flex-wrap:
flex-wrap:nowrap;默认值，不换行 不换行就会得到如下效果 压缩子元素的宽度
flex-wrap:wrap;表示换行，默认交叉轴正向换行
flex-wrap:wrap-reverse;表示换行 ，默认交叉轴反向换行
子元素在主轴方向的对齐方式：justify-content:flex-start:默认值，开始方向对齐
justify-content:flex-end 结束方向对齐 给父元素设置justify-content:flex-end 就会得到下面效果：
justify-content: center; 居中对齐 给父元素设置justify-content:center 就会得到下面效果：
justify-content:space-between; 两端对齐，项目之间的间隔都相等 给父元素设置justify-content:space-between 就会得到下面效果：
justify-content：space-aroud; 每个项目两侧的间隔都相等。所以项目之间的间隔比项目与边框的间隔大一倍。
给父元素设置justify-content:space-aroud 就会得到下面效果：
子元素在交叉轴方向上的对齐方式 开始方向对齐 align-items:flex-start
结束方向对齐 align-items:flex-end
居中对齐 align-items:center;
项目的第一行文字的基线对齐：algn-items：baseline;
默认值：如果项目未设置高度或设为auto，将占满整个容器的高度： algn-items：stretch;
多行子元素在交叉轴方向上的对齐方式：开始对齐方式：align-content:flex-start
给父元素设置 align-content:flex-start 得到下面效果
结束方向对齐:align-content:flex-end 给父元素设置 align-content:flex-end 得到下面效果
居中对齐align-content:center; 给父元素设置 align-content:center 得到下面效果
两端对齐，项目之间的间隔都相等align-content:space-between
每个项目两侧的间隔都相等。所以项目之间的间隔比项目与边框的间隔大一倍。align-content:space-aroud
默认值 会拉伸容器内的每个项目占用的空间，填空方式为给每个项目增加空白，占满整个交叉轴 align-content:stretch;
设置弹性元素的顺序：order:默认值0 元素按照order 属性的值的增序进行布局
值越小排列越靠前，拥有相同order 属性值的元素按照它们在源代码中出现的顺序进行布局
设置弹性元素的扩展比率来分配剩余空间： flex-grow:0；未设置默认为0
设置弹性元素的收缩比率来收缩空间 flex-shrink:1（默认值1）
元素收缩空间公式： 1.多出来的尺寸 2.总权重：元素1尺寸*收缩比率+元素2尺寸*收缩比率
3.收缩空间：元素尺寸*收缩比率*多出来的尺寸/总权重