弹性盒子在pc端存在兼容性问题，在移动端不存在，是编写移动端项目时大量使用的布局方式
弹性盒子display:flex;
设置子级排列的方向 flex-direction:row;
默认情况下是水平为row从左向右
row-reverse 从右向左
column 列分布 从上向下
column-reverse 列分布 从下向上
设置子级盒子是否强制换行 flex-wrap:wrap;
默认是nowrap不换行
wrap换行
简写属性
flex-flow: row wrap;
设置子级盒子在水平的分布 justify-content: space-between;
space-between平均分布
center内容居中
flex-start居左
flex-end 居右
space-around 到间隙平均分布，左右距父级有间隙，间隙为子级盒子之间距离的一般
垂直方向：align-items:stretch;
align-items用来设置一行上的子级盒子，在垂直方向上的对齐方式默认值是拉伸
stretch 拉伸 高度被强制拉伸到与父级高度一样高
flex-start 取消拉伸 顶对齐
center 取消拉伸 居中对齐
flex-end 取消拉伸 底部对齐
align-content: center;
垂直方向的分布问题
align-content多行在垂直方向上的分布问题
flex-start 居上
center 居中
flex-end 居下
space-between 垂直方向平均分布
space-around 垂直方向带间隙平均分布
如果垂直方向只要一行，那么垂直方向的分布问题就转换为垂直方向的对齐问题
此时只有align-items有效
只要有标签在，就会参与平均分布，常见的问题是父级通过after添加一个看不见的盒子，
导致子级个数发生变化，从而产生对不齐的效果
order设置弹性盒子中子级盒子排列的先后顺序 值越大越靠后 每个盒子都要设置
order: 1;
flex-grow 用来设置子级弹性盒子中宽度比例 此时子级的宽度设置将无效
当弹性盒子中的子级是按列分布时，flex-grow用来设置每个盒子的高度比例
当一些盒子的高度和宽度给定盒子将对剩余的空间进行比例分配
flex-grow：在使用时首先会对每个子级盒子的宽度做一个预估，
flex-grow按比例拆分的实际是父级盒子这一行剩余的空间，由于子级盒子
中不可避免的有内容存在，因此在使用flex-grow进行宽度比例划分时，可先将子级盒子的
宽度设置为0px