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 flex flex-wrap" style="max-width: 500px">
    <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>

Wrap-Reverse

Flexible items wrap if necessary but in reverse order.

1
2
3

<div class="card flex flex-wrap-reverse" style="max-width: 500px">
    <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>

Nowrap

Flexible items do not wrap and keep their position.

1
2
3

<div class="card flex flex-nowrap overflow-hidden" style="max-width: 500px">
    <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-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 flex flex-wrap-reverse md:flex-wrap" style="max-width: 500px">
    <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>