⌘ K
esc

    Flex Grow

    Controls how much a flexible item grows.

    Classes
    Class Properties
    flex-grow-0 flex-grow: 0;
    flex-grow-1 flex-grow: 1;
    Grow

    Second item grows while others do not.

    PrimeFlex
    PrimeFlex
    PrimeFlex
    
    <div class="card">
        <div class="flex card-container blue-container overflow-hidden">
            <div class="flex-none flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">PrimeFlex</div>
            <div class="flex-grow-1 flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">PrimeFlex</div>
            <div class="flex-none flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">PrimeFlex</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-grow-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
    Grow on small device
    
    <div class="card">
        <div class="flex card-container yellow-container overflow-hidden">
            <div class="flex-grow-1 md:flex-grow-0 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Grow on small device</div>
        </div>
    </div>