Tailwind CSS - Flex Basis

Previous
Quiz
Next

Tailwind CSS Flex Basis is a utility class that is used to set the initial size of the flex item before the distribution of free space.

Tailwind CSS Flex Basis Classes

The following is the list of Tailwind CSS Flex Basis classes which are utilities that effectively set the initial size of a flex item.

Class CSS Properties
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%;

Functionality of Tailwind CSS Flex Basis Classes

  • basis-*: Class specifies the initial size of the flex item due to which it will remain in its specified size while the remaining space is distributed among other elements. {*} here specifies the size value that can be set as per the need.
  • basis-auto: This class replaces the CSS flex-basis: auto; property, which specifies that the flex item will take as much space as it needs to display its content.

Tailwind CSS Flex Basis Class Examples

The following examples will illustrate the Tailwind CSS Flex Basis class utility.

Fixed Flex Items

The below example illustrates the use of basis-* class.

Example

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

Auto Flex Items

The below example is illustrating the use of basis-auto class.

Example

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

Hover Effect on Flex

The below example is illustrating the use of Flex Basis with hover class.

Example

<!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>
Print Page
Previous
Next