Flex

Flex布局

1、display：flex 相当于将当前元素设置为块级的弹性布局
display：inline-flex 相当于将当前元素设置为行内元素的弹性布局

2、主轴（X）和交叉轴（Y）
1、主轴开始/结束位置：main-start/end
2、交叉轴开始/结束位置：cross-start/end
2、主轴/交叉轴的大小：main/cross-size

3、容器：
1、flex-direction:row; 定义容器中的子元素在主轴上的排序方式，row为横向正序，row-reverse为横向倒叙，column为纵向正序,column-reverse为纵向倒叙
2、justify-content: center; 用于控制容器中的子元素在主轴上的对齐方式，默认flex-start左对齐, center居中对齐, flex-end右对齐,
space-between为左右两端靠容器，而且子元素均等分，space-around为容器两边的宽度是相邻子元素宽度的一半，
3、align-items: center; 用于控制子元素在交叉轴的对齐方式 flex-start | flex-end | center | baseline （保持是第一行文本的机线对齐）| stretch 、normal（没设置高度的话，自动拉伸到整个高度）
4、flex-wrap: nowrap; 用于控制容器中的子元素是否换行, nowrap默认为不换行,会根据容器的宽度等分子元素。 wrap为换行,根据子元素设置的宽高进行等分，超出之后自然换行。
5、flex-flow: row nowrap; 是上面排序方式和是否换行的缩写形式, 默认为row和nowrap,即横向排列，不换行
6、align-content: stretch; 用于控制多行项目的子容器在交叉轴上的对齐方式,如果子元素只有一行，则不起作用 flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

4、项目：
1、order: 0; 定义子元素中的顺序,order的值越小越在前面
2、align-self: flex-start; 用于让个别的子元素拥有与其它子元素不同的对齐方式，flex-start | flex-end | center | baseline （保持是第一行文本的机线对齐）| stretch 、normal（没设置高度的话，自动拉伸到整个高度）
3、flex-grow: 0; 定义当容器有剩余空间的时候，为0的话就正常显示，为1的话会将当前为1的子元素进行放大
4、flex-shrink: 1; 当项目的宽度不足的时候，是否等比缩小, 默认为1,空间不足时大家一起等比缩小， 当为0的时候，不等比缩小
5、flex-basis: auto; 用于设置项目宽度，设置主轴上面子元素的大小，默认auto时，项目会保持默认宽度，可以为具体数值，宽度大小
6、flex：1； 是flex-grow flex-shrink flex-basis的缩写，用于定义子元素的放大，缩小，宽度，默认为0 1 auto
flex：1代表等分