Controls how much a flexible item shrinks.
| Class | Properties |
|---|---|
| flex-grow-0 | flex-grow: 0; |
| flex-grow-1 | flex-grow: 1; |
Second item does not shrink while others do.
<div class="flex overflow-hidden">
<div class="flex-grow-1 flex-shrink-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">1</div>
<div class="flex-shrink-0 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">shrink item</div>
<div class="flex-grow-1 flex-shrink-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">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-shrink-1 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">
<div class="flex-grow-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">1</div>
<div class="flex-shrink-1 md:flex-shrink-0 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">Shrink on Mobile</div>
<div class="flex-grow-1 flex align-items-center justify-content-center bg-primary font-bold p-4 m-3 border-round">3</div>
</div>