Web速查-索引

order

定义

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

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

语法

order: number|initial|inherit;

属性值

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习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