flex-布局：flex-wrap

        /*浏览器默认*/
        flex-wrap: nowrap;
        /*多行*/
        flex-wrap: wrap;
        /*反方向多行*/
        flex-wrap: wrap-reverse;

        示例
        <style>
     .container {
        width: 700px;
        height: 500px;
        background-color: orange;
        display: flex;
        /*浏览器默认*/
        flex-wrap: nowrap;
        /*多行*/
        flex-wrap: wrap;
        /*反方向多行*/
        flex-wrap: wrap-reverse;
     }
    .item1 {
        background-color: red;
        width: 50px;
        height: 100px;
    }
    .item2 {
        background-color: pink;
        width: 100px;
        height: 100px;
    }
    .item3 {
        background-color: green;
        width: 150px;
        height: 100px;
    }
    .item4 {
        background-color: purple;
        width: 200px;
        height: 100px;
    }
    .item5 {
        background-color: rgb(109, 170, 69);
        width: 250px;
        height: 100px;
    }
</style>
<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
</div>