⌘ K
esc

    Flex

    A shorthand property to define flex-grow, flex-shrink and flex-basis at once.

    Classes
    Class Properties
    flex-1 flex: 1 1 0%;
    flex-auto flex: 1 1 auto;
    flex-initial flex: 0 1 auto;
    flex-none flex: none;
    Initial

    flex-initial sets flex-grow to 0, flex-shrink to 1 and flex-basis to auto which is the default setting of browsers.

    Prime
    Prime and PrimeFlex
    Prime
    Prime and PrimeFlex
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    <div class="card">
        <div class="card-container blue-container overflow-hidden">
            <div class="flex">
                <div class="flex-initial flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">Prime</div>
                <div class="flex-initial flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
            </div>
            <div class="flex">
                <div class="flex-initial flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">Prime</div>
                <div class="flex-initial flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
                <div class="flex-initial flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
            </div>
        </div>
    </div>
    
    
    Flex 1

    Sets grow and shrink to 1 to auto grow and shrink while keeping flex-basis to 0.

    Prime
    Prime and PrimeFlex
    Lorem ipsum dolor sit amet
    Prime
    Prime and PrimeFlex
    Lorem ipsum dolor sit amet
    
    <div class="card">
        <div class="card-container yellow-container overflow-hidden">
            <div class="flex">
                <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime</div>
                <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
                <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
            </div>
            <div class="flex">
                <div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime</div>
                <div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
                <div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
            </div>
        </div>
    </div>
    
    
    Auto

    Sets grow and shrink to 1 to auto grow and shrink while keeping flex-basis to auto.

    Prime
    Prime and PrimeFlex
    Lorem ipsum dolor sit amet
    Prime
    Prime and PrimeFlex
    Lorem ipsum dolor sit amet
    
    <div class="card">
        <div class="card-container green-container overflow-hidden">
            <div class="flex">
                <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 px-5 py-3 border-round">Prime</div>
                <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
                <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
            </div>
            <div class="flex">
                <div class="flex-auto flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 px-5 py-3 border-round">Prime</div>
                <div class="flex-auto flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
                <div class="flex-auto flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
            </div>
        </div>
    </div>
    
    
    None

    Same as "0 0 auto" meaning the element does not grow or shrink.

    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit amet
    
    <div class="card">
        <div class="card-container purple-container overflow-hidden">
            <div class="flex">
                <div class="flex-1 flex align-items-center justify-content-center bg-purple-500 font-bold text-white m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
                <div class="flex-none flex align-items-center justify-content-center bg-purple-500 font-bold text-white m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
                <div class="flex-1 flex align-items-center justify-content-center bg-purple-500 font-bold text-white m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
            </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-auto 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
    flex-1 on small devices and none on bigger.
    flex-1 on small devices and none on bigger.
    
    <div class="card">
        <div class="card-container indigo-container overflow-hidden">
            <div class="flex">
                <div class="flex-1 md:flex-none flex align-items-center justify-content-center bg-indigo-500 font-bold text-white m-2 px-5 py-3 border-round">flex-1 on small devices and none on bigger.</div>
                <div class="flex-1 md:flex-none flex align-items-center justify-content-center bg-indigo-500 font-bold text-white m-2 px-5 py-3 border-round">flex-1 on small devices and none on bigger.</div>
            </div>
        </div>
    </div>