Flex Shrink

Controls how much a flexible item shrinks.

Getting Started
Class Properties
flex-shrink-0 flex-shrink: 0;
flex-shrink-1 flex-shrink: 1;
Shrink

Second item does not shrink while others do.

1
shrink item
3

<div class="card flex">
    <div class="flex-grow-1 flex-shrink-1 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="width: 200px; min-height: 100px">1</div>
    <div class="flex-shrink-0 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="width: 200px; min-height: 100px">shrink item</div>
    <div class="flex-grow-1 flex-shrink-1 font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="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-shrink-1 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
Shrink on Mobile
3

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