flex布局利用order排序

order是设置在items里面的属性,具体作用是可以决定本身的排列先后顺序,

    <style>
        .test{
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
        }
        .box{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: #ff0;
             /* 设置order属性 */
            order: 1;
        }
        .box2{
            background-color: #0f0;
             /* 设置order属性 */
            order: 2;
        }
        .box3{
            background-color: #fff;
            /*设置order属性*/
            order:0;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box1 box">idems1</div>
        <div class="box2 box">idems2</div>
        <div class="box3 box">idens3</div>
    </div>
</body>

 

 由此可见order属性的属性值默认为0,值越小越排在前面。

posted @ 2022-01-11 11:40  Magi黄元  阅读(447)  评论(0)  编辑  收藏  举报