Defines whether the flexible items should wrap or not.
| Class | Properties |
|---|---|
| flex-wrap | flex-wrap: wrap; |
| flex-wrap-reverse | flex-wrap: wrap-reverse; |
| flex-nowrap | flex-wrap: nowrap; |
Flexible items wrap if necessary.
<div class="flex flex-wrap" style="max-width: 500px">
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">3</div>
</div>
Flexible items wrap if necessary but in reverse order..
<div class="flex flex-wrap-reverse" style="max-width: 500px">
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">3</div>
</div>
Flexible items do not wrap and keep their position.
<div class="flex flex-wrap" style="max-width: 500px">
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 150px; min-height: 100px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 150px; min-height: 100px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 150px; min-height: 100px">3</div>
</div>
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.
| 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-wrap-reverse md:flex-wrap" style="max-width: 500px">
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold m-2 border-round" style="min-width: 200px; min-height: 100px">3</div>
</div>