`justify-content`屬性定義了項目在主軸上的對齊方式。它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。 > * `flex-start`（默認值）：左對齊 > * `flex-end`：右對齊 > * `center`： 居中 > * `space-between`：兩端對齊，項目之間的間隔都相等。 > * `space-around`：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 ~~~css .box { justify-content: flex-start | flex-end | center | space-between | space-around; } ~~~  ~~~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> ~~~ ~~~css .box { display: flex; 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 { justify-content: flex-start; } ~~~  * `flex-end`：右對齊 ~~~css .box { justify-content: flex-end; } ~~~  * `center`： 居中 ~~~css .box { justify-content: center; } ~~~  * `space-between`：兩端對齊，項目之間的間隔都相等。 ~~~css .box { justify-content: space-between; } ~~~  * `space-around`：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 ~~~css .box { justify-content: space-around; } ~~~