⌘ K
esc

    Flex Shrink

    Controls how much a flexible item shrinks.

    Getting Started
    Class Properties
    flex-shrink-0 flex-shrink: 0;
    flex-shrink-1 flex-shrink: 1;
    Shrink

    Second item does not shrink while others do.

    1
    shrink item
    3
    
    <div class="card">
        <div class="flex card-container blue-container">
            <div class="flex-grow-1 flex-shrink-1 flex align-items-center justify-content-center bg-blue-500 font-bold text-white p-4 m-3 border-round">1</div>
            <div class="flex-shrink-0 flex align-items-center justify-content-center bg-blue-500 font-bold text-white p-4 m-3 border-round">shrink item</div>
            <div class="flex-grow-1 flex-shrink-1 flex align-items-center justify-content-center bg-blue-500 font-bold text-white p-4 m-3 border-round">3</div>
        </div>
    </div>
    
    
    Responsive

    Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:flex-shrink-1 to use a responsive class.

    • sm: small screens e.g. phones
    • md: medium screens e.g. tablets
    • lg: large screens e.g. notebooks
    • xl: larger screens .e.g monitors
    1
    Shrink on Mobile
    3
    
    <div class="card">
        <div class="flex card-container yellow-container">
            <div class="flex-grow-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 p-4 m-3 border-round">1</div>
            <div class="flex-shrink-1 md:flex-shrink-0 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 p-4 m-3 border-round">Shrink on Mobile</div>
            <div class="flex-grow-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 p-4 m-3 border-round">3</div>
        </div>
    </div>