CSS flex-shrink属性

定义和用法

flex-shrink属性指定项目相对于同一容器内其他flex项目的收缩方式。

注意：如果元素不是flex项，则flex-shrink属性无效。

特征	说明
默认值	1
继承	没有
动画	有。CSS动画参考
CSS版本	CSS3
JavaScript语法	object.style.flexShrink="5"尝试一下

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	Internet Explorer	Chrome	FireFox	Safari	Opera
属性名称
flex-shrink	11.0	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

flex-shrink: number|initial|inherit;

让第二个flex项比其余的缩小三倍：

/* Safari 6.1+ */
div:nth-of-type(2) {
  -webkit-flex-shrink: 3; 
} 

/* Standard syntax */
div:nth-of-type(2) {
  flex-shrink: 3;
}

尝试一下

属性值	描述
number	一个数字，指定项目相对于其他flex项目的收缩程度。默认值为1
initial	将此属性设置为其默认值。查看initial关键字
inherit	从其父元素继承此属性。查看inherit关键字