Tailwind CSS - Flex 佈局換行

Tailwind CSS Flex Wrap 是一個實用程式類，用於指定彈性專案在其容器內如何換行。此類指定彈性專案是否換行。

Tailwind CSS Flex Wrap 類

以下是Tailwind CSS Flex Wrap 類的列表，用於指定彈性專案的換行行為。

類名	CSS 屬性
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

Tailwind CSS Flex Wrap 功能

flex-wrap: 此類替換 CSS flex-wrap: wrap; 屬性。此類允許彈性專案換行到多行。
flex-wrap-reverse: 此類替換 CSS flex-wrap: wrap-reverse; 屬性。此類允許彈性專案以反向方向換行。
flex-nowrap: 此類替換 CSS flex-wrap: nowrap; 屬性。此類不允許彈性專案換行。

Tailwind CSS Flex Wrap 類示例

以下示例將說明 Tailwind CSS Flex Wrap 類實用程式。

Tailwind CSS Flex Wrap

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

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Wrap Class
    </h2>
    <div class="flex flex-wrap 
                bg-gray-200 h-48 border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

Tailwind CSS Flex Nowrap

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

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Nowrap Class
    </h2>
    <div class="flex flex-nowrap bg-gray-200 h-48 
                border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

Tailwind CSS Flex Wrap Reverse 類

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

示例

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Wrap Reverse Class
    </h2>
    <div class="flex flex-wrap-reverse bg-gray-200 h-48 
                border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

列印頁面