Tailwind CSS - 弹性盒模型(Flex)

Tailwind CSS Flex 是一个实用类，用于指定弹性项目在弹性容器中如何增长和收缩。

Tailwind CSS Flex 类

以下是Tailwind CSS Flex 类的列表，它们指定了弹性项目的扩展和收缩行为。

类名	CSS 属性
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

Tailwind CSS Flex 的功能

flex-1: 此类替换 CSS flex: 1 1 0%; 属性。此类使弹性项目根据需要增长和收缩，同时忽略其初始大小。
flex-auto: 此类替换 CSS flex: 1 1 auto; 属性。此类使弹性项目增长和收缩，同时考虑其初始大小。
flex-initial: 此类替换 CSS flex: 0 1 auto; 属性。此类使弹性项目可以收缩但不能增长，仍然考虑其初始大小。
flex-none: 此类替换 CSS flex: none; 属性。此类不允许弹性项目增长或收缩。

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 类实用程序。

允许弹性项目根据需要增长或收缩

要允许任何弹性项目根据需要增长或收缩，我们可以使用flex-1 类，它将忽略其初始大小。

示例

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 Flex 1
    </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="flex-1 bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-1 bg-green-300 p-4 w-28 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

允许弹性项目增长或收缩

如果我们在每个项目上使用flex-auto 类，那么我们可以允许每个弹性项目根据屏幕大小增长或收缩。

示例

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 Flex Auto
    </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="flex-auto bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-auto bg-green-300 p-4 w-28 mr-2
                    border-2 border-orange-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

允许弹性项目收缩但不能增长

如果我们在任何子元素上使用flex-initial 类，那么我们允许该项目收缩，但限制它不根据屏幕大小增长。

示例

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 Flex Initial
    </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="flex-initial bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-initial bg-green-300 p-4 w-28 mr-2
                    border-2 border-orange-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>
</html>

阻止弹性项目增长或收缩

通过使用flex-none 类，我们可以阻止弹性项目根据屏幕大小变化而增长和收缩。

示例

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 Flex None
    </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="flex-none 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-28 mr-2
                    border-2 border-orange-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

打印页面