亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

如風般魅影 · 更新于 2020-05-05

flex order 排序

一般情況下瀏覽器會把元素從左到右或者從上到下排列，如果我們想要更改它們的排列順序該如何做呢？使用order就可以輕松的修改。數字越大越往后，數字越小越在前。

1. 官方定義

order 屬性設置或檢索彈性盒模型對象的子元素出現的順序。

2. 慕課解釋

子元素可以通過設置 order 數值的大小來設定在頁面中出現的順序，數值小的在前，數值大的在后。

3. 語法

.item-child{
    order:1;
}

屬性說明

參數名稱 參數類型 解釋
order number 數值越小排位越靠前

4.兼容性

IE Edge Firefox Chrome Safari Opera ios android
10+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4

5. 實例

  1. 子元素 child-1 在右側 child-2 在左側。
<div class="demo">
    <div class="child-1">
        1
    </div>
    <div class="child-2">
        2
    </div>
</div>

.demo{
    display: flex;
}
.child-1{
    flex:auto;
    order:2;
    background: #000;
}
.child-2{
    flex:auto;
    order:1;
    background: rgb(255, 2, 2);
}

效果圖

圖片描述

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .demo{
    display: flex;
}
.child-1{
    flex:auto;
    order:2;
    background: #000;
}
.child-2{
    flex:auto;
    order:1;
    background: rgb(255, 2, 2);
}
    </style>
</head>
<body>
<div class="demo">
    <div class="child-1">
        1
    </div>
    <div class="child-2">
        2
    </div>
</div>
   
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
子元素 child-1 在右側 child-2 在左側效果圖
  1. 子元素 child-1 在下 child-2 在上。
<div class="demo">
    <div class="child-1">
        1
    </div>
    <div class="child-2">
        2
    </div>
</div>

.demo{
    display: flex;
    flex-direction: column ;
}
.child-1{
    flex:auto;
    order:2;
    background: #000;
}
.child-2{
    flex:auto;
    order:1;
    background: rgb(255, 2, 2);
}

效果圖

圖片描述

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .demo{
    display: flex;
    flex-direction: column ;
}
.child-1{
    flex:auto;
    order:2;
    background: #000;
}
.child-2{
    flex:auto;
    order:1;
    background: rgb(255, 2, 2);
}
    </style>
</head>
<body>
<div class="demo">
    <div class="child-1">
        1
    </div>
    <div class="child-2">
        2
    </div>
</div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
子元素 child-1 在下 child-2 在上

6. 經驗分享

通過使用 order 屬性可以實現拖動排序，當 JS 腳本運行之后，只要確定元素拖動到指定的位置通過修改對應的 order 就可以輕松完成順序的改變。

7. 小結

只有在彈性盒模型下起作用。