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>

打印页面