css布局排序order的用法，可使flex和grid布局轻松调整顺序

概述

使用css的order属性，在不破坏dom结构的情况下，可以轻松实现顺序的调整，会使用了order属性之后，你可以做很多之前只能使用定位才能做的布局。

当然order并不是新属性，很早前的版本就有了，可以看mdn对order属性的介绍，地址：developer.mozilla.org/zh-CN/docs/...

应用场景

如上图所示，正常文档流，肯定是从左到右排列的，因为对整体进行了倾斜，超出区域的进行了裁剪，我想让第一张比较精致的图片放到正中心，你首先想到的肯定是定位，因为我之前做这种布局的时候，一直是这样做的，看似简单但是需要算的不少，相当麻烦。

如上图所示的发展历程布局，按照正常文档里是左边年份、中间圆点分割、右边详情内容，要是想要达到按照间隔左右调整顺序的话，在不破坏原有dom结构的情况下还是比较麻烦的。

那么下面介绍一下order排序，那么这些问题就可以轻松的实现了。

order说明

如果想要使用order排序，那么必须在设置弹性或网格容器中，也就是说父级必须是flex弹性布局或者grid网格布局中，使用order调整的是子元素的顺序。

未明确指定 order 值的项会被赋予默认值 0，数值越大排序越靠后，可以支持负值。

order用法

css 复制代码

 <div class="out">
     <div class="box">子元素1</div>
     <div class="box">子元素2</div>
     <div class="box">子元素3</div>
 </div>

.out{
    border:1px solid #eee;   
    display: flex;   
    gap:10px;      
}
.box{
    width: 100px;
    height: 100px;
    background: #ccc;
}
.box:nth-child(1){
    order:3;
}
.box:nth-child(2){
    order:-1;
}

如上所示，为第二个元素设置了order负数，数最小的就跑到了最前面，给第一个box设置3，它的值最大，就跑到了最右边，用法还是比较简单的，就是自己数好了数就可以了。

发展历程时间轴的例子

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .out{
            width: 800px;
            min-height: 300px;
            margin:50px auto;           
            position: relative;
        }
        .out .row{
            display: flex;
            padding:30px 0;
        }
        .out .row .time,.out .row .content{
            flex:1;
        }
        .out .row .time{
            font-size: 30px;
            font-weight: bold;    
            text-align: right;                   
        }
        .out .row .content{
            font-size: 16px;
            color:#888;
            line-height: 1.7em;
            text-align: left;           
        }
        .out .row .content img{
            width: 100%;
            border-radius: 10px;
        }
        .out .row .drop{
            width: 60px;            
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            z-index: 1;     
        }
        .out .row .drop::after{
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #3B8EEA;
            display: block;
            content: "";
        }
          
        .out .row:nth-child(2n) .time{
            order:1;
            text-align: left;
        }
        .out .row:nth-child(2n) .content{
            order:-1;
            text-align: right;
        }
        

        .out::before{
            display: block;
            content: "";
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #ccc;
            position: absolute;
            left:50%;
            top:0;
            transform: translateX(-10px);
        }
        .out::after{
            display: block;
            content: "";
            width: 1px;
            height: 100%;
            background: #ccc;
            position: absolute;
            left:50%;
            top:0;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="row">
            <div class="time">2025年</div>
            <div class="drop"></div>
            <div class="content">                
                <img src="https://fastly.picsum.photos/id/1002/600/260.jpg?hmac=TWj_FxpEQvxD3eyj6j4BSd18XJoHzsVgE5IV0tXFClA" alt="">
                <p>企业完成全球化布局，在亚太、欧洲设立创新中心，推出首款AI驱动的碳中和产品线，年营收突破500亿元。获评"全球最具可持续性企业"，启动火星技术研发实验室，探索太空经济。</p>
                
            </div>
        </div>

        <div class="row">
            <div class="time">2024年</div>
            <div class="drop"></div>
            <div class="content">
                <img src="https://fastly.picsum.photos/id/567/600/260.jpg?hmac=K9BrXAXg9eujg_j4K8huAIjfuOohwqJk3t46whVsdys" alt="">
                <p>并购两家产业链上游科技公司，实现核心零部件自主生产。发布革命性量子计算商用平台，员工规模达1.2万人，研发投入占比升至18%，核心技术专利突破1万项。</p>                
            </div>
        </div>

        <div class="row">
            <div class="time">2023年</div>
            <div class="drop"></div>
            <div class="content">
                <img src="https://fastly.picsum.photos/id/649/600/260.jpg?hmac=1YONuebdwOost5K-JMHaXWbfY2bV-_zxlvgn9zft9Bw" alt="">
                <p>总部智慧园区落成，全部采用可再生能源。主导制定行业国际标准，与NASA合作开发太空材料技术。遭遇数据泄露危机后，网络安全评级跃居全球前三。</p>                
            </div>
        </div>

        <div class="row">
            <div class="time">2022年</div>
            <div class="drop"></div>
            <div class="content">
                <img src="https://fastly.picsum.photos/id/233/600/260.jpg?hmac=xzmbgV0aehu4unmzI825FmfKRjyt1uMDqzzHfr3QNRM" alt="">
                <p>上市首日市值破千亿，推出垂直领域大语言模型。东南亚工厂投产缓解供应链压力，但因芯片短缺被迫延迟智能家居产品线发布。</p>                
            </div>
        </div>

        <div class="row">
            <div class="time">2021年</div>
            <div class="drop"></div>
            <div class="content">
                <img src="https://fastly.picsum.photos/id/927/600/260.jpg?hmac=Nw8ZzW3yd6mdV5LmRI6Oee-zExoMDM26SJemZH7P034" alt="">
                <p>疫情下转型远程办公系统服务商，业绩逆势增长200%。收购生物识别技术团队，推出首款医疗级可穿戴设备。创始人入选《时代》百大人物。</p>                
            </div>
        </div>
    </div>
</body>
</html>

视频教程

www.bilibili.com/video/BV1ZM... 不喜欢看文档，可以看视频教程，录制了order的使用方式，大家参考学习。