Tailwind CSS - 顺序

Tailwind CSS Order 是一个实用程序类，用于指定其容器内 flex 和 grid 项目的顺序。

Tailwind CSS Order 类

以下是指定 flex 和 grid 项目有序排列的 Tailwind CSS Order 类的列表。

类	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 属性。此类指定 flex 和 grid 项目的默认行为，使其保持与 DOM 中相同的顺序。

Tailwind CSS Order 类示例

以下示例将说明 Tailwind CSS Order 类实用程序。

排列 Flex 项目

order-* 实用程序可以有效地与 flex 项目一起使用，如下面的示例所示。

<!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>

顺序定位 Flex 项目

order-first & order-last 实用程序可以有效地定位 flex 项目，如下面的示例所示。

<!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>

排列 Grid 项目

order-first & order-last 实用程序可以有效地定位 grid 项目，如下面的示例所示。

<!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>

打印页面