什么是order？
CSS order 属性用于指定 flex 项在 flex 容器中的显示顺序。
弹性项的顺序由其 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 初始
order： initial value 只是将项目的 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 value，则 flex 项将根据 HTML 标记在其默认模式中显示。
例下面是一个示例，其中 order 属性设置为 unset 到 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 值时，flex 项目将按其顺序显示 显示在 HTML 标记中，但顺序相反。
例下面是一个示例，其中 Order 属性设置为第五个 flex-item 的 revert。然后是第五个弹性项目的顺序 将被反转，因此它将首先显示 -
<!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>
