Tailwind CSS - Flex 基準線

Tailwind CSS Flex 基準線是一個實用程式類，用於在分配自由空間之前設定彈性專案的初始大小。

Tailwind CSS Flex 基準線類

以下是Tailwind CSS Flex 基準線類的列表，這些類是有效地設定彈性專案初始大小的實用程式。

類	CSS 屬性
basis-0	flex-basis: 0px;
basis-1	flex-basis: 0.25rem; /* 4px */
basis-2	flex-basis: 0.5rem; /* 8px */
basis-3	flex-basis: 0.75rem; /* 12px */
basis-4	flex-basis: 1rem; /* 16px */
basis-5	flex-basis: 1.25rem; /* 20px */
basis-6	flex-basis: 1.5rem; /* 24px */
basis-7	flex-basis: 1.75rem; /* 28px */
basis-8	flex-basis: 2rem; /* 32px */
basis-9	flex-basis: 2.25rem; /* 36px */
basis-10	flex-basis: 2.5rem; /* 40px */
basis-11	flex-basis: 2.75rem; /* 44px */
basis-12	flex-basis: 3rem; /* 48px */
basis-14	flex-basis: 3.5rem; /* 56px */
basis-16	flex-basis: 4rem; /* 64px */
basis-20	flex-basis: 5rem; /* 80px */
basis-24	flex-basis: 6rem; /* 96px */
basis-28	flex-basis: 7rem; /* 112px */
basis-32	flex-basis: 8rem; /* 128px */
basis-36	flex-basis: 9rem; /* 144px */
basis-40	flex-basis: 10rem; /* 160px */
basis-44	flex-basis: 11rem; /* 176px */
basis-48	flex-basis: 12rem; /* 192px */
basis-52	flex-basis: 13rem; /* 208px */
basis-56	flex-basis: 14rem; /* 224px */
basis-60	flex-basis: 15rem; /* 240px */
basis-64	flex-basis: 16rem; /* 256px */
basis-72	flex-basis: 18rem; /* 288px */
basis-80	flex-basis: 20rem; /* 320px */
basis-96	flex-basis: 24rem; /* 384px */
basis-auto	flex-basis: auto;
basis-px	flex-basis: 1px;
basis-0.5	flex-basis: 0.125rem; /* 2px */
basis-1.5	flex-basis: 0.375rem; /* 6px */
basis-2.5	flex-basis: 0.625rem; /* 10px */
basis-3.5	flex-basis: 0.875rem; /* 14px */
basis-1/2	flex-basis: 50%;
basis-1/3	flex-basis: 33.333333%;
basis-2/3	flex-basis: 66.666667%;
basis-1/4	flex-basis: 25%;
basis-2/4	flex-basis: 50%;
basis-3/4	flex-basis: 75%;
basis-1/5	flex-basis: 20%;
basis-2/5	flex-basis: 40%;
basis-3/5	flex-basis: 60%;
basis-4/5	flex-basis: 80%;
basis-1/6	flex-basis: 16.666667%;
basis-2/6	flex-basis: 33.333333%;
basis-3/6	flex-basis: 50%;
basis-4/6	flex-basis: 66.666667%;
basis-5/6	flex-basis: 83.333333%;
basis-1/12	flex-basis: 8.333333%;
basis-2/12	flex-basis: 16.666667%;
basis-3/12	flex-basis: 25%;
basis-4/12	flex-basis: 33.333333%;
basis-5/12	flex-basis: 41.666667%;
basis-6/12	flex-basis: 50%;
basis-7/12	flex-basis: 58.333333%;
basis-8/12	flex-basis: 66.666667%;
basis-9/12	flex-basis: 75%;
basis-10/12	flex-basis: 83.333333%;
basis-11/12	flex-basis: 91.666667%;
basis-full	flex-basis: 100%;

Tailwind CSS Flex Basis 類功能

basis-*： 類指定彈性專案的初始大小，因此它將保持在其指定的大小，而剩餘的空間將分配給其他元素。{*}在此指定可以根據需要設定的大小值。
basis-auto： 此類替換 CSS flex-basis: auto; 屬性，該屬性指定彈性專案將佔用顯示其內容所需的空間。

Tailwind CSS Flex Basis 類示例

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

固定彈性專案

以下示例說明了 basis-* 類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Basis
    </h2>
    <div class="flex p-3 border-black border-2">
        <div class="bg-green-500 p-3 mr-1.5 h-16">
            Flex item 1
        </div>
        <div class="bg-green-400 p-3 mr-1.5 h-16">
            Flex item 2
        </div>
        <div class="bg-green-300 p-3 mr-1.5 h-16
                    basis-56">
            Flex item 3
        </div>
        <div class="bg-green-200 p-3 mr-1.5 h-16">
            Flex item 4
        </div>
    </div>
</body>
</html>

自動彈性專案

以下示例說明了 basis-auto 類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Basis Auto
    </h2>
    <div class="flex bg-green-500">
        <div class="bg-green-500 p-1 m-1.25 h-12">
            Flex item 1
        </div>
        <div class="bg-green-400 p-1 m-1.25 h-12">
            Flex item 2
        </div>
        <div class="bg-green-300 p-1 m-1.25 h-12
                    flex-auto">
            Flex item 3
        </div>
        <div class="bg-green-200 p-1 m-1.25 h-12">
            Flex item 4
        </div>
        <div class="bg-green-100 p-1 m-1.25 h-12">
            Flex item 5
        </div>
    </div>
</body>
</html>

Flex 的懸停效果

以下示例說明了將 Flex Basis 與 hover 類一起使用。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Basis With Hover Class
    </h2>
    <div class="flex bg-green-100 h-44">
        <div class="bg-green-300 flex-basis-1/3 
                    hover:basis-full p-4
                    border-2 border-green-700">
            Item 1 <br>
            <span class="text-pink-600 
                            font-bold">
                Hover me :)
            </span>
            
        </div>
        <div class="bg-lime-300 p-4 flex-basis-1/3
                    border-2 border-black">
            Item 2
        </div>
        <div class="bg-teal-300 p-4 flex-basis-1/3
                    border-2 border-blue-500">
            Item 3
        </div>
    </div>
</body>

</html>

列印頁面