Tailwind CSS - Flex 收縮

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

Tailwind CSS Flex 收縮類

以下是Tailwind CSS Flex 收縮類的列表，它指定了彈性專案的收縮行為。

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

Tailwind CSS Flex 收縮的功能

shrink: 此類替換 CSS flex-shrink: 1; 屬性。此類允許彈性專案根據需要收縮。
shrink-0: 此類替換 CSS flex-shrink: 0 屬性。此類不允許彈性專案收縮。

Tailwind CSS Flex 收縮類示例

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

允許彈性專案收縮

在此示例中，我們將對專案設定shrink類，如果需要，該類允許專案收縮。

示例

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

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Shrink
    </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="shrink bg-green-500 p-4 w-56 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>

阻止彈性專案收縮

要阻止任何專案收縮，我們可以使用shrink-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 Shrink 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="shrink-0 bg-green-500 p-4 w-56 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>

列印頁面