Tailwind CSS - Flex 伸展

Tailwind CSS Flex 伸展 是一個實用程式類，用於指定彈性專案在彈性容器內如何伸展。

Tailwind CSS Flex 伸展類

以下是Tailwind CSS Flex 伸展類的列表，用於指定彈性專案的擴充套件或伸展行為。

類	CSS 屬性
grow	flex-grow: 1;
grow-0	flex-grow: 0;

Tailwind CSS Flex 伸展的功能

grow: 此類替換 CSS flex-grow: 1; 屬性。此類使彈性專案能夠伸展並填充可用空間。
grow-0: 此類替換 CSS flex-grow: 0; 屬性。此類不允許彈性專案伸展。

Tailwind CSS Flex 伸展類示例

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

允許彈性專案伸展

在此示例中，我們將為一個專案設定grow類，使該專案能夠伸展以填充任何可用空間。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
     
<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grow
    </h2>
    <div class="flex">
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        <div class="grow bg-green-500 p-4 w-48 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

阻止彈性專案伸展

要阻止任何專案伸展，我們可以使用grow-0類。

示例

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

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grow 0
    </h2>
    <div class="flex">
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        <div class="grow-0 bg-green-500 p-4 w-48 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

列印頁面