flex-布局：flex-wrap

最新推荐文章于 2024-08-17 02:22:40 发布

浪豪

最新推荐文章于 2024-08-17 02:22:40 发布

阅读量216

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Chinachenh/article/details/126425635

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

        /*浏览器默认*/
        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>