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.

<div class="flex flex-row flex-wrap">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>

Row Reverse#

Items are displayed horizontally but in reverse order.

<div class="flex flex-row-reverse flex-wrap">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>

Column#

Items are displayed vertically.

<div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center h-4rem bg-primary font-bold border-round m-2">3</div>
</div>

Column Reverse#

Items are displayed vertically but in reverse order.

<div class="flex flex-column-reverse">
    <div class="flex align-items-center justify-content-center h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center h-4rem bg-primary font-bold border-round m-2">3</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.

Class	Description
sm:	small screens e.g. phones
md:	medium screens e.g. tablets
lg:	large screens e.g. notebooks
xl:	larger screens e.g monitors

<div class="flex flex-column md:flex-row">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>