什么是顺序？
CSS order 属性用于指定 Flex 项目在 Flex 容器中出现的顺序。
Flex 项目的顺序由下式确定:它们的 order 属性的值。order值较低的弹性项目将首先显示。
以下是一些需要记住的其他事项:
order 属性不会被子元素继承。
order 属性仅影响 Flex 项目。
order 的默认值属性为 0。
以下是可用于属性顺序的所有可能值:
integer:表示项目要使用的序数组。
inherit:使用其父级的相同值。
initial:元素使用默认值，即 0。
CSS Order 整数值
CSS order 属性设置为整数值。 order 属性的值可以是任何正整数或负整数。
我们可以使用具有正整数值的 order 属性。正值意味着具有最高正顺序值的项目将最后显示。
示例
这里是一个整数值示例 -
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 2">Item 1</div>
<div style="order: 6">Item 2</div>
<div style="order: 4">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: 3">Item 5</div>
<div style="order: 5">Item 6</div>
</div>
</body>
</html> CSS order 属性可以设置为负整数值。负值意味着负序值最高的项目将首先显示。
示例
这里是一个示例 -
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 4">Item 1</div>
<div style="order: 6">Item 2</div>
<div style="order: -3">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: -5">Item 5</div>
<div style="order: 2">Item 6</div>
</div>
</body>
</html> CSS order initial
order: initial值只是将项目的 order 属性设置回其初始值，通常为 0。
示例
这里是一个示例:
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 5">Item 1</div>
<div style="order: 3">Item 2</div>
<div style="order: 1">Item 3</div>
<div style="order: 6">Item 4</div>
<div style="order: initial">Item 5</div>
<div style="order: 4">Item 6</div>
</div>
</body>
</html> CSS Order Unset
如果将 order 属性设置为 unset 值，则 Flex 项目将根据 HTML 标记以其默认顺序显示。
示例
这是一个示例，其中 order 属性设置为initial为 Flex 项目 3。然后 Flex 项目 3 的顺序将按照默认顺序显示 -
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 2">Item 1</div>
<div style="order: 4">Item 2</div>
<div style="order: unset">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: 3">Item 5</div>
<div style="order: 5">Item 6</div>
</div>
</body>
</html> CSS Order Revert
当我们将 order 属性设置为 revert 值时，Flex 项目将按照其在 HTML 标记中出现的顺序显示，但顺序相反。
示例
下面是一个示例，其中 Order 属性设置为恢复第五个弹性项目。然后第五个弹性项目的顺序将被颠倒，因此它将首先显示 -
<!DOCTYPE html>
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 5">Item 1</div>
<div style="order: 3">Item 2</div>
<div style="order: 1">Item 3</div>
<div style="order: 6">Item 4</div>
<div style="order: revert">Item 5</div>
<div style="order: 4">Item 6</div>
</div>
</body>
</html>