Flexbox

Flex Shrink

Utilities for controls how flex items shrink.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
flex-shrink-0	flex-shrink: 0
flex-shrink-1	flex-shrink: 1
flex-shrink-2	flex-shrink: 2
flex-shrink-3	flex-shrink: 3
flex-shrink-4	flex-shrink: 4
flex-shrink-5	flex-shrink: 5
flex-shrink-6	flex-shrink: 6

Usage

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis praesentium fugit iusto fuga sint deserunt expedita deleniti ex! Iste consequatur, deleniti cumque vitae explicabo esse. Consequatur quam reprehenderit aperiam dolores.

flex-shrink-1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis praesentium.

flex-shrink-0

<div class="flex">
  <div class="flex-shrink-0 ... flex-basis-32">
    ...
  </div>
  <div class="flex-shrink-1">
    ...
  </div>
  <div class="flex-shrink-0 ... flex-basis-32">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-shrink-basis {
  @extend
    .flex-shrink-0,
    .flex-basis-32;
}
.dummy-shrink-1 {
  @extend
    .flex-shrink-1;
}

SCSS