CSS3 order

admin發表於2018-07-27
CSSS3

css3彈性佈局總體介紹可以參閱display:flex彈性佈局一章節。

order屬性規定Flex專案相對於同一容器內其他Flex專案的順序。

如果元素不是Flex專案，則此屬性不起作用。

語法結構:

[CSS] 純文字檢視 複製程式碼
order: number|initial|inherit;

屬性值說明:

（1）.number:預設值是 0。規定Flex專案的順序。

（2）.initial：Flex專案預設方式顯示，可以參閱css initial屬性一章節。

（3）.inherit:從父元素繼承該屬性。

瀏覽器相容:

（1）.IE10+瀏覽器支援此屬性。

（2）.edge覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width:400px;
  height:150px;
  display:flex;
  background:#ccc;
}
#main div{
  width:70px;
  height:70px;
}
div#red{order:2;}
div#blue{order:4;}
div#green{order:3;}
div#pink{order:1;}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;" id="red"></div>
  <div style="background-color:lightblue;" id="blue"></div>
  <div style="background-color:lightgreen;" id="green"></div>
  <div style="background-color:pink;" id="pink"></div>
</div>
</body>
</html>

上面的程式碼可以根據專案的order屬性值進行排序。

相關文章