⌘ K
esc

    Flex Wrap

    Defines whether the flexible items should wrap or not.

    Classes
    Class Properties
    flex-wrap flex-wrap: wrap;
    flex-wrap-reverse flex-wrap: wrap-reverse;
    flex-nowrap flex-wrap: nowrap;
    Wrap

    Flexible items wrap if necessary.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-wrap card-container blue-container" style="max-width: 500px">
            <div class="flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 border-round" style="min-width: 200px; min-height: 100px">1</div>
            <div class="flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 border-round" style="min-width: 200px; min-height: 100px">2</div>
            <div class="flex align-items-center justify-content-center bg-blue-500 font-bold text-white m-2 border-round" style="min-width: 200px; min-height: 100px">3</div>
        </div>
    </div>
    
    
    Wrap-Reverse

    Flexible items wrap if necessary but in reverse order.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-wrap-reverse card-container yellow-container" style="max-width: 500px">
            <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 border-round" style="min-width: 200px; min-height: 100px">1</div>
            <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 border-round" style="min-width: 200px; min-height: 100px">2</div>
            <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 border-round" style="min-width: 200px; min-height: 100px">3</div>
        </div>
    </div>
    
    
    Nowrap

    Flexible items do not wrap and keep their position.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-nowrap overflow-hidden card-container green-container" style="max-width: 500px">
            <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 border-round" style="min-width: 150px; min-height: 100px">1</div>
            <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 border-round" style="min-width: 150px; min-height: 100px">2</div>
            <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white m-2 border-round" style="min-width: 150px; min-height: 100px">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-wrap 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
    2
    3
    
    <div class="card">
        <div class="flex flex-wrap-reverse md:flex-wrap card-container purple-container" style="max-width: 500px">
            <div class="flex align-items-center justify-content-center bg-purple-500 font-bold text-white m-2 border-round" style="min-width: 200px; min-height: 100px">1</div>
            <div class="flex align-items-center justify-content-center bg-purple-500 font-bold text-white m-2 border-round" style="min-width: 200px; min-height: 100px">2</div>
            <div class="flex align-items-center justify-content-center bg-purple-500 font-bold text-white m-2 border-round" style="min-width: 200px; min-height: 100px">3</div>
        </div>
    </div>