CSS详解系列:10-Flex项目属性order

fox/ 01月23日/ CSS教程/ 浏览 547

order 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。


您可以通过具体的数值来定义项目在容器中的位置。其中 number 就是项目在容器中的位置,默认值为 0。


注意:如果元素不是弹性盒对象的元素,则 order 属性不起作用。


属性的语法格式如下:


order: number;


实际应用形式:


.item-box {
    order:3;
}


这里我们以实例给大家做参考


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex-box {
            display: flex;
        }
        .flex-box div {
            width: 60px;
            height: 60px;
            margin: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    </div>
</body>
</html>


默认flex模式下是顺序排列的

当我们通过order改变数值,可以改变排列顺序


        .flex-box div:nth-child(1) {
            order: 5;
        }
        .flex-box div:nth-child(2) {
            order: -1;
        }
        .flex-box div:nth-child(3) {
            order: 9;
        }
        .flex-box div:nth-child(4) {
            order: 3;
        }
        .flex-box div:nth-child(5) {
            order: 0;
        }


具体形式可参考下图



发表评论

暂无评论,抢个沙发...

客服 工单