`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。该属性可能取6个值。 > * `flex-start`：与交叉轴的起点对齐。 > * `flex-end`：与交叉轴的终点对齐。 > * `center`：与交叉轴的中点对齐。 > * `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。 > * `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 > * `stretch`（默认值）：轴线占满整个交叉轴。 ~~~css .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } ~~~  ~~~html <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> <div class="box-item">5</div> <div class="box-item">6</div> <div class="box-item">7</div> <div class="box-item">8</div> <div class="box-item">9</div> </div> ~~~ ~~~css .box { display: flex; flex-wrap: wrap; height: 800px; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } ~~~ * `flex-start`：与交叉轴的起点对齐。 ~~~css .box { align-content: flex-start; } ~~~  * `flex-end`：与交叉轴的终点对齐。 ~~~css .box { align-content: flex-end; } ~~~  * `center`：与交叉轴的中点对齐。 ~~~css .box { align-content: center; } ~~~  * `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。 ~~~css .box { align-content: space-between; } ~~~  * `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 ~~~css .box { align-content: space-around; } ~~~  * `stretch`（默认值）：轴线占满整个交叉轴。 ~~~css .box { align-content: stretch; } .box-item { height: auto; } ~~~