`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; } ~~~