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