Flex 布局
参考地址：https://www.w3school.com.cn/css/css3_flexbox.asp#flex-direction
一、父项目
注意后面所提及的行是根据设置x 还是 y轴为主轴而定的，如果x轴是主轴那么行就是横着的，反之如果是y那么行就是竖着的。
父项目所涉及的属性
flex-direction: 设置主轴的方向
justify-conten: 设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction（默认是从左到右，从上到下）:
column 值设置垂直堆叠 flex 项目（从上到下）
column-reverse 值垂直堆叠 flex 项目（但从下到上）
row 值水平堆叠 flex 项目（从左到右）
row-reverse 值水平堆叠 flex 项目（但从右到左）
justify-content（设置主轴上的子元素排列方式）:
注意：这个排列方式是对应主轴而言的，所以我们在使用的时候一定要注意我们当前设置的主轴方向
center 值将 flex 项目在容器的中心对齐
flex-start 值将 flex 项目在容器的开头对齐（默认）
flex-end 值将 flex 项目在容器的末端对齐
space-around 值显示行之前、之间和之后带有空格的 flex 项目
space-between 值显示行之间有空格的 flex 项目
flex-wrap 设置子元素是否换行
注意：如果默认没有换行，flex布局会通过修改子元素的大小来进行一行放置；同时这里的换行如果没有调整，非常难看——解释一下这里难看的前提一般都是设置了justify-content为space-around，这样不足的换行就会不齐，使用左对齐会好点，但是右侧则会有点难看。
wrap 值规定 flex 项目将在必要时进行换行
nowrap 值规定将不对 flex 项目换行（默认）
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
align-items 设置侧轴上的子元素排列方式（单行）
注意：首先拉伸是默认值，但是设置了拉伸就不要给子盒子设置高度，否则看不到效果
center 值将 flex 项目在容器中间对齐
flex-start 值将 flex 项目在容器顶部对齐
flex-end 值将弹性项目在容器底部对齐
stretch 值拉伸 flex 项目以填充容器（默认）
baseline 值使 flex 项目基线对齐
align-content 设置侧轴上的子元素排列方式（多行）
注意：这里因为是多行的则轴设置，所以这里需要是设置了flex-wrap为换行的
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stertch 设置子项元素高度平分父元素高度
flex-flow 为 justify-content 和 flex-warp 属性的复合属性
# 上两句话等价于下面一句
flex-direction: column;
flex-wrap: wrap;
||
flex-flow: column wrap;
二、子项目
子项目中所涉及到的属性
flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order 属性定一子项的排列顺序（前后）
flex 定义子项分配剩余空间，用flex来表示占多少份数
注意：这个属性是定义子项目分配剩余空间，即占父项目剩余空间的多少，如果我们想要实现子元素平均占据父元素空间，可以不设置子项目的宽度高直接flex: 1，如果你想要其中一份占更多就可以调整1到更大的数字
数字，默认0
align-self 控制子项自己在侧轴上的排列方式
注意：这个属性允许单个项目有与其他项目不一样的对齐方式，可覆盖夫项目的 align-items 属性的值。默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
元素的值可以参考 align-items
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stertch 设置子项元素高度平分父元素高度
order 属性定义项目的排列顺序
注意：数值越小越靠前，默认为0。要和z-index区分一下
属性值为数值，值越小越靠前