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>

列印頁面