flex-shrink - CSS（层叠样式表）编辑

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 type	a 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!

Desktop
Mobile

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.