order干嘛的？
舉個(gè)例子
<meta charset="utf-8" />
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{
display:flex;
margin:0;
padding:10px;
list-style:none;
background-color:#eee;
}
.box li{
width:100px;
height:100px;
border:1px solid #aaa;
text-align:center;}
</style>
</head>
<body>
<h1>order示例：</h1>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>
上述代碼的結(jié)果是
image.png
如果在style加上
#box li:nth-child(3) {
order:1;
}
結(jié)果
image.png
如果是
#box li:nth-child(3) {
order:-1;
}
結(jié)果是
image.png
如果是
#box li:nth-child(3) {
order:1;
}
#box li:nth-child(2) {
order:2;
}
結(jié)果是
image.png
總結(jié)
所有含有order的子元素，會(huì)按照order后面的數(shù)字進(jìn)行排序。
當(dāng)然，這是flex布局的一部分。
