CSS flex-shrink properties

CSS Reference CSS Reference


Examples

Let the second element to shrink to a third of the other elements:

div:nth-of-type(2) {flex-shrink: 3;}


Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately following the digital -webkit-, -ms- or -moz- after the first version to support the prefix property.

Attributes
flex-shrink 29.0
21.0 -webkit-
11.0
10.0 -ms-
28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

Definition and Usage

flex-shrink attribute is used to set or retrieve the flexible pouch contraction ratio. .

Note: If theelement is not resilient element box object, the flex-shrink property does not work.

Defaults: 1
inherit: no
Can be animated: Yes. Please refer to animation (Animatable) . try it
version: CSS3
JavaScript syntax: object .style.flexShrink = "5"try


CSS Syntax

flex-shrink:number|initial|inherit;

Property Value

描述
number 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit


related articles

CSS Reference: Flex Properties

CSS Reference Manual: Flex-Basis property

CSS Reference Manual: Flex-direction property

CSS Reference Manual: Flex-Flow Properties

CSS Reference Manual: Flex-Grow property

CSS Reference Manual: Flex-wrap property


CSS Reference CSS Reference