flex-shrink

Definition

flex-shrink is a CSS property that sets the flex shrink factor of a flex item. It specifies how much the item will shrink relative to the rest of the flexible items in the flex container when there isn't enough space on the main axis.

Examples

In this example, .item1 will not shrink, .item2 will shrink at a rate of 1, and .item3 will shrink at a rate of 2, compared to the other flexible items in the container:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  flex-shrink: 0;
}

.item2 {
  flex-shrink: 1;
}

.item3 {
  flex-shrink: 2;
}

In this example, when the total width of all items exceeds the width of the container, .item1 will shrink at a rate of 1, .item2 will shrink at a rate of 2, and .item3 will not shrink:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  flex-shrink: 1;
  width: 200px;
}

.item2 {
  flex-shrink: 2;
  width: 300px;
}

.item3 {
  flex-shrink: 0;
  width: 400px;
}

In this example, when the total width of all items exceeds the width of the container, .item1 will shrink at a rate of 2, .item2 will shrink at a rate of 1, and .item3 will not shrink:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  flex-shrink: 2;
  width: 200px;
}

.item2 {
  flex-shrink: 1;
  width: 300px;
}

.item3 {
  flex-shrink: 0;
  width: 400px;
}

Values

Best Practices

• Use flex-shrink property in combination with flex-basis and flex-grow properties to achieve the desired result.
• The default value of flex-shrink is 1, so if you want an item not to shrink, set its flex-shrink value to 0.
• Use flex-shrink property with a number that makes sense for the design and the content.
• Consider using min-width and max-width properties to set the minimum and maximum width of a flex item.
• Test your code in different screen sizes and browsers to ensure that it works as intended.

Browser Compatibility