Css 简明教程
CSS - Order
What is an order?
CSS order 属性用于指定柔性项目在柔性容器内出现的顺序。
柔性项目的顺序由其 order 属性的值决定。带有较低 order 值的柔性项目将最先显示。
以下是需要记住的其他事项：
-
order 属性不会被子元素继承。
-
order 属性仅影响 flex 项目。
-
order 属性的默认原值为 0。
以下列出了可用于属性 order 的所有可能值：
-
integer ：表示项目要使用的顺序组。
-
inherit ：使用其父级的相同值。
-
initial ：元素使用默认值，即 0。
CSS Order Integer
CSS order 属性设为整数。order 属性的值可以为任何正整数或负整数。
我们可使用具有正整数值的 order 属性。正值意味着具有最高正序值的项目将最后显示。
Example
示例如下：
<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 属性可设为负整数。负值意味着具有最高负序值的项目将首先显示。
Example
示例如下：
<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。
Example
示例如下：
<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 标记以其默认顺序显示。
Example
以下是一个示例，其中 order 属性设置为对 flex 项目 3 设置为 unset。然后 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 标记中出现的顺序显示，但顺序相反。
Example
以下是一个示例，其中 order 属性对第五个 flex-item 设置为 revert。然后第五个 flex-item 的顺序将相反，因此它将首先显示——
<!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>