前端基础-CSS-弹性盒-项目-调整顺序

最新推荐文章于 2024-05-19 13:00:49 发布

码码大海

最新推荐文章于 2024-05-19 13:00:49 发布

阅读量178

点赞数

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

本文链接：https://blog.csdn.net/weixin_43254742/article/details/126131115

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<style>
         .box{
                width: 500px;
                height:500px;
                border: 2px solid black;
                margin: 100px auto;
                display: flex;

                /* flex-direction: column; */
            }
            .box div{
                width: 100px;
                height: 100px;
                border: 1px dashed red ;
                box-sizing: border-box;
            }
            /* order:0; //默认
            order可以取正负两种值，编号小的优先显示，同级别编号按代码顺序显示 */
            .div1{
                order: 0;
            }
            .div3{
                order: 1;
            }
            .div4{
                order: 1;
            }
            
    </style>
      

    <div class="box">
        <div class="div1">11111</div>
        <div class="div2">22222</div>
        <div class="div3">33333</div>
        <div class="div4">44444</div>
        <div class="div5">55555</div>
    </div>