flex-shrink

版本：CSS3

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;

浏览器支持

IE11以上版本的浏览器都支持flex-shrink

语法

flex-shrink:<number>

取值

• <number>：参见<number>。负值无效，默认为1。

说明：

设置或检索弹性盒的收缩比率。

• 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
• flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
• 对应的脚本特性为flexGrow。

示例

a,b,c将按照1:1:3的比率来收缩空间。

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(3){flex-shrink:3;}

本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3。我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化。通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；。于是我们可以计算a,b,c将被移除的溢出量是多少：

• a被移除溢出量：(200*1/1000)*200，即约等于40px
• b被移除溢出量：(200*1/1000)*200，即约等于40px
• c被移除溢出量：(200*3/1000)*200，即约等于120px
• 最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

例子

//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; 
}

//HTML
<div id="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

//CSS
#main{
 width:350px;
 height:100px;
 border:1px solid #c3c3c3;
 display:-webkit-flex;/*safari*/
 display:flex;
}

#main div{
 -webkit-flex-grow:1;/*safari6.1+*/
 -webkit-flex-shrink:1;/*safari6.1+*/
 -webkit-flex-basis:100px;/*safari6.1+*/
 flex-grow:1;
 flex-shrink:1;
 flex-basis:100px;
}

#main div:nth-of-type(2){
 -webkit-flex-shrink:3;/*safari6.1+*/
 flex-shrink:3;
}

效果图：