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; 屬性。此類不允許彈性專案增長或收縮。

Tailwind CSS Flex 類示例

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

允許彈性專案根據需要增長或收縮

要允許任何彈性專案根據需要增長或收縮，我們可以使用flex-1 類，它將忽略其初始大小。

示例

<!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 類，那麼我們可以允許每個彈性專案根據螢幕大小增長或收縮。

示例

<!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 類，那麼我們允許該專案收縮，但限制它不根據螢幕大小增長。

示例

<!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 類，我們可以阻止彈性專案根據螢幕大小變化而增長和收縮。

示例

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

列印頁面