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 flex flex-row flex-wrap">
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">1</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">2</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">3</div>
</div>

Row Reverse

Items are displayed horizontally but in reverse order.

1
2
3

<div class="card flex flex-row-reverse flex-wrap">
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">1</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">2</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">3</div>
</div>

Column

Items are displayed vertically.

1
2
3

<div class="card flex flex-column">
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">1</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">2</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">3</div>
</div>

Column Reverse

Items are displayed vertically but in reverse order.

1
2
3

<div class="card flex flex-column-reverse">
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">1</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">2</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">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.

  • 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 flex flex-column md:flex-row">
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">1</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">2</div>
    <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 shadow-3" style="min-width: 200px; min-height: 100px">3</div>
</div>