本文参与4月更文挑战，打卡day11，第十一篇
13. flex布局
之前青训营也做过笔记，有部分图片展示得更为清晰，可以参考青训营css笔记——flex布局
flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
定义在父节点的属性
使用flex布局的方式，给要使用这种布局的标签所在的父元素添加display:flex;即可
添加display:flex;之前
添加display:flex;之后
flex-direction
指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
取值：
row：flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。（默认值，子元素宽度超过父元素会被压缩）
row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。
column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同。（特：如果内部子元素的高度超过父元素就会压缩子元素）
column-reverse：表现和column相同，但是置换了主轴起点和主轴终点。
flex-wrap
指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许控制行的堆叠方向（在浏览器窗口变小的时候，是否进行换行）。
取值：
nowrap：默认值。不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
正常情况（浏览器窗口能够放得下子元素）
浏览器窗口变小，子元素堆叠
flex-flow
是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。
justify-content
定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
取值：
flex-start：默认值。左对齐。
flex-end：右对齐。
center：居中对齐。
space-between：左右两段对齐。
space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离和相邻元素之间距离一样。
align-items
将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
取值：
flex-start：元素向主轴起点对齐（行间有间距）。
flex-end：元素向主轴终点对齐。
center：元素在侧轴居中。
stretch：在子元素的高度没有被定义的时候，弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
align-content（类似align-items）
设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
取值：
flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行（行间无间距）。
flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。（在只有一行子元素的时候不能实现在侧轴的居中效果）
stretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
