This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

flex-shrink

Summary

The flex-shrink CSS property specifies how much a flex item will be reduced with respect to the other items in the flex container to fit within a reduced container.

Overview table

Initial value
1
Applies to
flex items
Inherited
No
Media
visual
Computed value
as specified
Animatable
Yes
CSS Object Model Property
flexShrink

Syntax

  • flex-shrink: number

Values

number
The flex shrink factor, which describes the proportion by which the flex item will shrink relative to the other flex items in the container. Negative numbers are invalid.

Examples

See flex examples for the use of this property in an example.

flex-shrink: 3;

Usage

 The best practice is to use (instead of this property) the flex shorthand property, as it correctly resets any unspecified flex components to accomodate common uses.

Notes

This property is animatable only for values of 1 or greater.

Related specifications

CSS Flexible Box Layout Model
Candidate Recommendation

See also

Related articles

Flexbox