默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。它可能取3个值： > * `nowrap`（默认）：不换行。 > * `wrap`：换行，第一行在上方。 > * `wrap-reverse`：换行，第一行在下方。 ~~~css .box { flex-wrap: nowrap | wrap | wrap-reverse; } ~~~  ~~~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> ~~~ ~~~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; } ~~~ * `nowrap`（默认）：不换行。 ~~~css .box { flex-direction: row; flex-wrap: nowrap; } ~~~  * `wrap`：换行，第一行在上方。 ~~~css .box { flex-direction: row; flex-wrap: nowrap; } ~~~  * `wrap-reverse`：换行，第一行在下方。 ~~~css .box { flex-direction: row; flex-wrap: nowrap; } ~~~