Tailwind CSS - Flex 佈局方向

Tailwind CSS Flex 佈局方向是一個實用工具類，用於設定Flex容器內Flex專案的排列方向。

Tailwind CSS Flex 佈局方向類

以下是Tailwind CSS Flex 佈局方向類的列表，這些實用工具有效地設定了Flex專案的初始大小。

類名	CSS 屬性
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

Tailwind CSS Flex 佈局方向的功能

flex-row: 此類替換CSS flex-direction: row; 屬性。此類使Flex專案能夠從左到右排列成一行。

flex-row-reverse: 此類替換CSS flex-direction: row-reverse; 屬性。此類使Flex專案能夠從右到左反向排列。

flex-col: 此類替換CSS flex-direction: column; 屬性。此類使Flex專案能夠垂直排列。

flex-col-reverse: 此類替換CSS flex-direction: column-reverse; 屬性。此類使Flex專案能夠以相反的方向垂直排列。

Tailwind CSS Flex 佈局方向類示例

以下示例將說明Tailwind CSS Flex 佈局方向實用工具類的用法。

水平Flex專案作為行

以下示例說明了flex-row類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Row
    </h2>
    <div class="inline-flex flex-row">
        <div class="bg-green-500 
                    text-4xl p-3 mr-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mr-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mr-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mr-1.5">four</div>
    </div>
</body> 
</html>

水平Flex專案作為反向行

以下示例說明了flex-row-reverse類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Row Reverse
    </h2>
    <div class="inline-flex flex-row-reverse">
        <div class="bg-green-500 
                    text-4xl p-3 mr-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mr-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mr-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mr-1.5">four</div>
    </div>
</body> 

</html>

垂直Flex專案作為列

以下示例說明了flex-col類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Col Class
    </h2>
    <div class="inline-flex flex-col">
        <div class="bg-green-500 
                    text-4xl p-3 mb-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mb-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mb-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mb-1.5">four</div>
    </div>
</body>

</html>

垂直Flex專案作為反向列

以下示例說明了flex-col-reverse類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Col Reverse Class
    </h2>
    <div class="inline-flex flex-col-reverse">
        <div class="bg-green-500 
                    text-4xl p-3 mb-1.5">One</div>
        <div class="bg-green-400 
                    text-4xl p-3 mb-1.5">two</div>
        <div class="bg-green-300 
                    text-4xl p-3 mb-1.5">three</div>
        <div class="bg-green-200 
                    text-4xl p-3 mb-1.5">four</div>
    </div>
</body>

</html>

列印頁面