flex-wrap容器属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

• （1）nowrap（默认）：不换行。
• （2）wrap：换行，第一行在上方。
• （3）wrap-reverse：换行，第一行在下方。

nowrap（默认）：不换行。

<div class="flex-wrap">
        <div class="nowrap">
            <p>我叫flex-warp：nowrap-1</p>
        </div>
        <div class="nowrap">
            <p>我叫flex-warp：nowrap-2</p>
        </div>
        <div class="nowrap">
            <p>我叫flex-warp：nowrap-3</p>
        </div>
        <div class="nowrap">
            <p>我叫flex-warp：nowrap-4</p>
        </div>
        <div class="nowrap">
            <p>我叫flex-warp：nowrap-5</p>
        </div>
        <div class="nowrap">
            <p>我叫flex-warp：nowrap-6</p>
        </div>
    </div>

.flex-wrap{
           display: flex;
           flex-wrap: nowrap;
           width: 500px;
           height: 300px;
           margin: auto;
           background-color: red;
       }
       .nowrap{
           width: 130px;
           height: 180px;
           border: 1px #000000 solid;
           background-color: blue;
       }

wrap：换行，第一行在上方。

  <div class="flex-wrap">
        <div class="wrap">
            <p>我叫flex-warp：warp-1</p>
        </div>
        <div class="wrap">
            <p>我叫flex-warp：warp-2</p>
        </div>
        <div class="wrap">
            <p>我叫flex-warp：warp-3</p>
        </div>
        <div class="wrap">
            <p>我叫flex-warp：warp-4</p>
        </div>
        <div class="wrap">
            <p>我叫flex-warp：warp-5</p>
        </div>
        <div class="wrap">
            <p>我叫flex-warp：warp-6</p>
        </div>
    </div>

        .flex-wrap{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            width: 650px;
            height: 300px;
            margin: auto;
            background-color: red;
        }
        .wrap{
            width: 150px;
            height: 100px;
            border: 1px black solid;
            background-color: blue;
        }

wrap-reverse：换行，第一行在下方。

<div class="flex-warp">
        <div class="warp-reverse">
            <p>我叫第一个warp-reverse</p>
        </div>
        <div class="warp-reverse">
            <p>我叫第二个warp-reverse</p>
        </div>
        <div class="warp-reverse">
            <p>我叫第三个warp-reverse</p>
        </div>
        <div class="warp-reverse">
            <p>我叫第四个warp-reverse</p>
        </div>
        <div class="warp-reverse">
            <p>我叫第五个warp-reverse</p>
        </div>
        <div class="warp-reverse">
            <p>我叫第六个warp-reverse</p>
        </div>
    </div>

.flex-warp{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap-reverse;
            width: 500px;
            height: 250px;
            margin: auto;
            background-color: red;
        }
        .warp-reverse{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            background-color: blue;
        }