flex-shrink

Summary

The CSS flex-shrink property specifies the flex shrink factor of a flex item.

  • Initial value 1
  • Applies to flex items, including in-flow pseudo-elements
  • Inherited no
  • Media visual
  • Computed value as specified
  • Animatable yes, as a number, except between 0 and other values
  • Canonical order the unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

Syntax

Formal syntax: <number>

flex-shrink: 2

flex-shrink: inherit

Values

<number>
See <number>. Negative values are invalid.

Examples

element { 
  flex-shrink: 3;
}

Specifications

Specification Status Comment
CSS Flexible Box Layout Module Candidate Recommendation  

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1]
20.0 (20.0)		 21.0-webkit Not supported 12.10 Not supported
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? Not supported 12.10 Not supported

[1] Firefox supports only single-line flexbox until Firefox 28. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

See also

Document Tags and Contributors

Tags:
Contributors to this page: Sheppy, scottrowe, soswow, ethertank, kscarfone, FredB, teoli, SJW
Last updated by: SJW,
Hide Sidebar