css order:设置弹性盒对象元素的顺序
1、order默认为0 。不起作用
2、从小到大排序,1在前,以此类推
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {
width:500px;
height:500px;
border:1px solid #000000;
display: flex;
}
.box {
width:80px;
height:80px;
border:1px solid #000000;
margin:5px 5px;
float: left;
}
#red {
order:3
}
#green {
order:4
}
#blue {
order:1
}
#red {
order:2
}
</style>
</head>
<body>
<div id="main">
<div id="red" class="box" style="background: red;">
1
</div>
<div id="green" class="box" style="background: green;">
2
</div>
<div id="blue" class="box" style="background: blue;">
3
</div>
<div id="orange" class="box" style="background: orange;">
4
</div>
</div>
</body>
</html>
效果: