flex弹性布局的汇总
弹性布局主要就是解决一个元素的子元素的布局方式，为布局提供最大的灵活性。但是使用弹性布局的前提就是要有父子结构。
1.介绍：
1.1 当父元素添加 display:flex时，原本的父元素就变成了容器，其子元素就成为了项目，所有的项目都允许按照弹性布局的方式排列。
（display:inline-flex是将行内元素变成容器）
1.2 从左向右的排列方向叫做主轴。最左侧为主轴的起点，最右侧为主轴的终点。
1.3 与主轴交叉垂直的方向（从上到下）叫做交叉轴。
~~注意：一个元素设置撑为flex容器之后，其子元素的浮动float/clear/vertical-align等属性都会失效，容器的对齐方式text-align也会失效。
2.容器的属性以及各属性的取值：
2.1 flex-direction:设置主轴的方向。
row:默认值，主轴为x轴，起点为左端。
row-reverse：将主轴进行反转，右端变成了起点，左端成为终点。
column:主轴为y轴，起点在顶端。
column-reverse:起点变成了终端。
2.2 flex-wrap:项目在主轴上排列空间不够时的换行方式。
wrap:不压缩，允许换行。
nowrap:默认值，空间不够时也不换行，项目自动的缩小。
wrap-reverse:允许换行并且反转。
2.3 flex-flow:是flex-direction和flex-wrap的缩写形式。
row nowrap:默认值，主轴为x轴，排列空间不够时项目缩小不换行。
row wrap:主轴为x轴，允许换行。
column wrap:主轴为y轴，允许换行。
column nowrap:主轴为y轴，排列空间不够时项目缩小不换行
2.4justify-content:定义项目在主轴上的对齐方式。
flex-start:默认值，在主轴的起点对齐。
flex-end:在主轴的终点对齐。
center:根据主轴居中对齐。
space-between:两端对齐，项目之间的间隔相等。
space-around:每个项目两侧的间隔都相等。
2.5align-items:定义项目在交叉轴上的对齐方式。
flex-start:默认值，在j交叉轴的起点对齐。
flex-end:在交叉轴的终点对齐。
center:根据交叉轴居中对齐。
*baseline:*根据交叉轴的基线对齐。
*stretch:*项目设置该尺寸时，在交叉轴上沾满空间。