第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

flex order 排序

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

1. 官方定義

order 屬性設(shè)置或檢索彈性盒模型對象的子元素出現(xiàn)的順序。

2. 慕課解釋

子元素可以通過設(shè)置 order 數(shù)值的大小來設(shè)定在頁面中出現(xiàn)的順序，數(shù)值小的在前，數(shù)值大的在后。

3. 語法

.item-child{
    order:1;
}

屬性說明

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

4.兼容性

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

5. 實例

  1. 子元素 child-1 在右側(cè) child-2 在左側(cè)。
<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 在右側(cè) child-2 在左側(cè)效果圖
  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. 經(jīng)驗分享

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

7. 小結(jié)

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