Tailwind CSS - Order
Tailwind CSS Order 是一个实用类，用于指定其容器内 flex 和 grid 项的顺序。
Tailwind CSS Order 类
以下是 Tailwind CSS Order 类的列表，用于指定 flex 和 grid 项的有序排列。
| 类 | CSS 属性 |
|---|---|
| order-1 | order: 1; |
| order-2 | order: 2; |
| order-3 | order: 3; |
| order-4 | order: 4; |
| order-5 | order: 5; |
| order-6 | order: 6; |
| order-7 | order: 7; |
| order-8 | order: 8; |
| order-9 | order: 9; |
| order-10 | order: 10; |
| order-11 | order: 11; |
| order-12 | order: 12; |
| order-first | order: -9999; |
| order-last | order: 9999; |
| order-none | order: 0; |
Tailwind CSS Order 的功能
- order-*: 此类用于对 flex 和 grid 项应用不同的排序。{*> 表示不同的排序范围，从 1 到 12。
- order-first: 此类替换了 CSS 的 order: -9999; 属性。此类用于将 flex 和 grid 项排序到容器的开头，而不关注它们在 DOM 中的位置。
- order-last: 此类替换了 CSS 的 order: 9999; 属性。此类用于将 flex 和 grid 项排序到容器的末尾，而不关注它们在 DOM 中的位置。
- order-none: 此类替换了 CSS 的 order: 0 属性。此类指定弹性项目和网格项目的默认行为，使其保持与 DOM 中相同的位置。
Tailwind CSS Order 类示例
以下示例将说明 Tailwind CSS Order 类实用程序。
排列弹性项目
order-* 实用程序可以有效地与弹性项目配合使用，如下例所示。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Order Class
</h2>
<div class="flex">
<div class="order-2 bg-green-600 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 1
</div>
<div class="order-1 bg-green-500 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<div class="order-4 bg-green-400 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 3
</div>
<div class="order-3 bg-green-300 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 4
</div>
</div>
</body>
</html>
按顺序定位弹性项目
order-first & order-last 实用程序可以有效地定位弹性项目，如下例所示。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Order First & Order Last Class
</h2>
<div class="flex">
<div class="bg-green-600 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 1
</div>
<!--Below div has given order-last class which make it to
positioned in the last-->
<div class="order-last bg-green-500 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<!--Below div has given order-first class which make it to
positioned in the first-->
<div class="order-first bg-green-400 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 3
</div>
<div class=" bg-green-300 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 4
</div>
</div>
</body>
</html>
排列网格项
order-first & order-last 实用程序可以有效地定位网格项，如下例所示。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Order Class On Grid Layout
</h2>
<div class="grid grid-cols-3 gap-4">
<div class="bg-green-600 p-4 order-6">Item 1</div>
<div class="bg-green-500 p-4 order-5">Item 2</div>
<div class="bg-green-400 p-4 order-4">Item 3</div>
<div class="bg-green-300 p-4 order-3">Item 4</div>
<div class="bg-green-200 p-4 order-2">Item 5</div>
<div class="bg-green-100 p-4 order-1">Item 6</div>
</div>
</body>
</html>
