order干嘛的？
举个例子
<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>
上述代码的结果是
image.png
如果在style加上
#box li:nth-child(3) {
order:1;
}
结果
image.png
如果是
#box li:nth-child(3) {
order:-1;
}
结果是
image.png
如果是
#box li:nth-child(3) {
order:1;
}
#box li:nth-child(2) {
order:2;
}
结果是
image.png
总结
所有含有order的子元素，会按照order后面的数字进行排序。
当然，这是flex布局的一部分。
