概述
CSS flex-shrink 属性指定了flex item的收缩规则。
The CSS flex-shrink property specifies the flex shrink factor of a flex item.
| 初始值 | 1 |
|---|---|
| 适用元素 | flex items, including in-flow pseudo-elements |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | yes, as a number |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
更多属性和定义请参见使用CSS Flexible boxes
See Using CSS flexible boxes for more properties and information.
语法
Formal syntax: <number>
flex-shrink: 2 flex-shrink: inherit
取值
<number>- 负值是不被允许的。
- See
<number>. Negative values are invalid.
例子
element {
flex-shrink: 3;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module flex-shrink |
Candidate Recommendation |
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 18.0 (18.0) (behind a pref) [1] 20.0 (20.0) [2] |
21.0-webkit | 11 [3] | 12.10 | 8.0-webkit |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 18.0 (18.0) (behind a pref) [1] 20.0 (20.0) [2] |
? | 未实现 | 12.10 | 未实现 |
[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.
[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0.
[3] Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.