本次主要理解 flex 布局中元素的几个属性，今天理解第一个 order 属性
order 属性翻译成人话就是，元素按照 order 定义的序号，顺序排列，序号小的在前面。
https://developer.mozilla.org…
In the live example below I have added a focus style in order that as you tab from link to link you can see which is highlighted. If you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.
.box {
display: flex;
flex-direction: row;
}
.box :nth-child(1) {order: 2;}
.box :nth-child(2) {order: 3;}
.box :nth-child(3) {order: 1;}
.box :nth-child(4) {order: 3;}
.box :nth-child(5) {order: 1;}
<div class="box">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
<div><a href="#">4</a></div>
<div><a href="#">5</a></div>
</div>
The order property is designed to lay the items out in ordinal groups. What this means is that items are assigned an integer that represents their group.
The items are then placed in the visual order according to that
integer, lowest values first.
If more than one item has the same integer value, then within that group the items are laid out as per source order.
As an example, I have 5 flex items, and assign order values as follows:
Source item 1: order: 2
Source item 2: order: 3
Source item 3: order: 1
Source item 4: order: 3
Source item 5: order: 1
These items would be displayed on the page in the following order:
Source item 3: order: 1
Source item 5: order: 1
Source item 1: order: 2
Source item 2: order: 3
Source item 4: order: 3
Items have a number showing their source order which has been rearranged.