order排序 - 码农教程

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
        }
        ul>li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background: red;
        }
        ul>li:nth-child(1){
            /*
            默认情况下每一个伸缩项都有一个order属性, 用于决定排序的先后顺序
            默认情况下所有伸缩项的order属性的取值都是0
            我们可以通过修改order属性的取值来实现伸缩项的排序
            order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面
            */
          order: 999;
        }
         ul>li:nth-child(2){
            background: green;
            order: 0;
        }
        ul>li:nth-child(3){
            background: blue;
            order: -1;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>