CSS - order 属性

什么是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>

本页