6. align-content
align-content：多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。它有六个属性值：
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 复制代码
那这个轴线数怎么确定呢？实际上这主要是由flex-wrap属性决定的，当flex-wrap 设置为 nowrap 时，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。当 flex-wrap 设置为 wrap 时，容器可能会出现多条轴线，这时就需要去设置多条轴线之间的对齐方式。
这里以水平方向为主轴时举例，即：flex-direction: row; flex-wrap: wrap;
（1）align-content: stretch：默认值，轴线占满整个交叉轴。这里我们先设置每个项目都是固定宽度，效果如下：
下面就去掉每个项目的高度，它会占满整个交叉轴，效果如下：
（2）align-content: flex-start：从交叉轴开始位置填充
（3）align-content: flex-end：从交叉轴结尾位置填充
（4）align-content: center：与交叉轴中点对齐
（5）align-content: space-between：与交叉轴两端对齐，轴线之前的间隔平均分布
（6）align-content: space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
三、子元素属性
子元素有以下六个属性：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1. order
order属性用来定义项目的排列顺序。数值越小，排列越靠前，默认为0。使用形式如下：
.item { order: <integer>; } 复制代码
2. flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器会根据这个属性来计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。使用形式如下：
.item { flex-basis: <length> | auto; } 复制代码
当主轴设置为水平时，当设置了 flex-basis，设置的项目宽度值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能生效。有两种特殊的值：
- 当
flex-basis值为 0 % 时，项目尺寸会被认为是0，因此无论项目尺寸设置多少都用； - 当
flex-basis值为 auto 时，则跟根据尺寸的设定值来设置大小。
3. flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间时也不放大。
当容器中所有的项目都设置了flex-basis属性时，如果仍有是剩余的空间，设置的 flex-grow 属性才能生效。
- 如果所有项目的flex-grow属性都设置为1，那么它们会均分剩余的空间，如下图所示：
- 如果其中一个项目的flex-grow属性设置为2，其他均为1，那么它占据的剩余空间就是其他项目的两倍，如下图所示：
3. flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不能设置负值，使用形式如下：
.item { flex-shrink: <number>; } 复制代码
- 如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小，如下图所示：
- 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小，如下图所示：
5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选。默认值为：flex:0 1 auto。使用形式如下：
.item{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 复制代码
对于flex的取值有几种常用的特殊情况： （1）默认值：flex:0 1 auto，即在有剩余空间时，只放大不缩小
.item { flex:0 1 auto; } .item { flex-grow: 0; flex-shrink: 1; flex-basis: auto; } 复制代码
（2）flex: none，即有剩余空间时，不放大也不缩小，最终尺寸通常表现为最大内容宽度。
.item { flex:0 0 auto; } .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } 复制代码
（3）flex: 0，即当有剩余空间时，项目宽度为其内容的宽度，最终尺寸表现为最小内容宽度。
.item { flex:0 1 0%; } .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; } 复制代码
（4）flex: auto，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。
.item { flex:1 1 auto; } .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } 复制代码
（5）flex: 1，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但是在尺寸不足时会优先最小化内容尺寸，
.item { flex:1 1 0%; } .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } 复制代码
6. align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 复制代码
这个属性和align-items属性的效果是一样的，只不过这个属性只对单个项目生效，而align-items是对容器中所有的项目生效。
设置容器的align-items属性为flex-start，容器中第三个项目的align-self属性为flex-end，效果如下：
Flex布局的基本使用主要就是这些了，flex布局可能是目前最好用的布局方式之一，不过仅限于小规模的布局，对于大规模的布局，可以使用grid布局
