CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset

初始值1
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typea number
正规顺序the unique non-ambiguous order defined by the formal grammar

更多属性和定义请参见使用 CSS 弹性盒子

语法

flex-shrink 属性只能是一个 <number>

取值

<number>
负值是不被允许的。参考 <number>

Formal syntax

<number>

示例

HTML

<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

CSS

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}

结果

规范

Specification Status Comment
CSS Flexible Box Layout Module
flex-shrink
Candidate Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
32.0 (32.0)[2]
21.0-webkit (Yes)-webkit
(Yes)
10[3] 12.10 8.0-webkit
Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support 18.0 (18.0)[1]
32.0 (32.0)[2]
? (Yes)-webkit
(Yes)
未实现 12.10 未实现

[1] Firefox 仅支持单行 flexbox 直到 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.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] 在 Firefox 32 之前,Gecko不能将动画从0开始或停止在0(Spec,Demo).。

[3] Internet Explorer 10 使用 0 而不是 1 作为 flex-shrink 属性的初始值。A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.

参考

文档标签和贡献者

此页面的贡献者: Ende93, dongyu_-_, Sebastianz, fscholz, BenFei, Go7hic, FredWe
最后编辑者: Ende93,