order

定义
语法
属性值
实例
浏览器支持

定义

order 属性设置或检索弹性盒模型对象的子元素出现的順序。

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

语法

order: number|initial|inherit;

属性值

值	说明
number	默认值为0，规定灵活项目的顺序
initial	设置该书行为它的默认值。
inherit	从父元素继承该属性

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style>
        #main
        {
            width:400px;
            height:100px;
            border:1px solid #2ebb96;
            display:flex;
        }
        #main div
        {
            width: 66px;
            height: 66px;
        }
        #RedDIV
        {
            order: 2;
            background-color: coral;
        }
        #BlueDIV
        {
            order: 4;
            background-color: lightblue;
        }
        #GreenDIV
        {
            order: 3;
            background-color: lightgreen;
        }
        #PinkDIV
        {
            order: 1;
            background-color: pink;
        }
    </style>
</head>
<body>
   <div id="main">
        <div id="RedDIV"></div>
        <div id="BlueDIV"></div>
        <div id="GreenDIV"></div>
        <div id="PinkDIV"></div>
    </div>
</body>
</html>

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
3.0	4.0	3.5	9.0