方法一

使用Order属性设置弹性盒对象元素的顺序。

示例:将3个元素按倒序显示

flex-direction:

描述
row(默认值)主轴为水平方向,起点在左端。
row-reverse主轴为水平方向,起点在右端。
column主轴为垂直方向,起点在上沿。
column-reverse主轴为垂直方向,起点在下沿。
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
display: flex;
flex-direction: column;
}
.container .first {
order: 3;
}
.container .second {
order: 2;
}
.container .third {
order: 1;
}
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<div class="first">
这是第一个元素
</div>
<div class="second">
这是第二个元素
</div>
<div class="third">
这是第三个元素
</div>
</div>

方式二

使用display属性将元素生成为表格与表格行的关系

表体)。表头)。页脚)。
描述
table-row-group此元素会作为一个或多个行的分组来显示(类似
table-header-group此元素会作为一个或多个行的分组来显示(类似
table-footer-group此元素会作为一个或多个行的分组来显示(类似

示例:

1
2
3
4
5
6
7
8
9
10
11
12
.container {
display:table;
}
.container .first {
display:table-footer-group;
}
.container .second {
display:table-row-group;
}
.container .third {
display:table-header-group;
}
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<div class="first">
这是第一个元素
</div>
<div class="second">
这是第二个元素
</div>
<div class="third">
这是第三个元素
</div>
</div>