默認情況下，項目都排在一條線（又稱"軸線"）上。`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; } ~~~