⌘ K
esc

    Flex Direction

    Sets the direction of flexible items.

    Classes
    Class Properties
    flex-row flex-direction: row;
    flex-row-reverse flex-direction: row-reverse;
    flex-column flex-direction: column;
    flex-column-reverse flex-direction: column-reverse;
    Row

    Items are displayed horizontally.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-row flex-wrap card-container blue-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>
    
    
    Row Reverse

    Items are displayed horizontally but in reverse order.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-row-reverse flex-wrap card-container yellow-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-gray-900 border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-gray-900 border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-gray-900 border-round m-2">3</div>
        </div>
    </div>
    
    
    Column

    Items are displayed vertically.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-column card-container green-container">
            <div class="flex align-items-center justify-content-center h-4rem bg-green-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center h-4rem bg-green-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center h-4rem bg-green-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>
    
    
    Column Reverse

    Items are displayed vertically but in reverse order.

    1
    2
    3
    
    <div class="card">
        <div class="flex flex-column-reverse card-container purple-container">
            <div class="flex align-items-center justify-content-center h-4rem bg-purple-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center h-4rem bg-purple-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center h-4rem bg-purple-500 font-bold text-white border-round m-2">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-row 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-column md:flex-row card-container indigo-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-indigo-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-indigo-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-indigo-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>