flex order 排序一般情況下瀏覽器會把元素從左到右或者從上到下排列，如果我們想要更改它們的排列順序該如何做呢？使用order就可以輕松的修改。數(shù)字越大越往后，數(shù)字越小越在前。 1. 官方定義order 屬性設置或檢索彈性盒模型對象的子元素出現(xiàn)的順序。 2. 解釋子元素可以通過設置 order 數(shù)值的大小來設定在頁面中出現(xiàn)的順序，數(shù)值小的在前，數(shù)值大的在后。 3. 語法.item-child{
order:;
}屬性說明
4.兼容性
5. 實例
<div class="demo"> <div class="child-1"> 1 </div> <div class="child-2"> 2 </div> </div> .demo{
display: flex;
}
.child-1{
flex:auto;
order:;
background: #000;
}
.child-2{
flex:auto;
order:;
background: rgb(, , );
}效果圖
<!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:;
background: #000;
}
.child-2{
flex:auto;
order:;
background: rgb(, , );
}
</style>
</head>
<body>
<div class="demo">
<div class="child-1">
1
</div>
<div class="child-2">
2
</div>
</div>
</body>
</html>
<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:;
background: #000;
}
.child-2{
flex:auto;
order:;
background: rgb(, , );
}效果圖
<!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:;
background: #000;
}
.child-2{
flex:auto;
order:;
background: rgb(, , );
}
</style>
</head>
<body>
<div class="demo">
<div class="child-1">
1
</div>
<div class="child-2">
2
</div>
</div>
</body>
</html>6. 經(jīng)驗分享通過使用 order 屬性可以實現(xiàn)拖動排序，當 JS 腳本運行之后，只要確定元素拖動到指定的位置通過修改對應的 order 就可以輕松完成順序的改變。 7. 小結(jié)只有在彈性盒模型下起作用。 |
