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; 属性。此类不允许弹性项目伸展。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS Flex 伸展类示例

以下示例将说明 Tailwind CSS Flex 伸展类实用程序。

允许弹性项目伸展

在此示例中，我们将为一个项目设置grow类，使该项目能够伸展以填充任何可用空间。

示例

Open Compiler

<!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类。

示例

Open Compiler

<!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>

打印页面