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。
默认值 | 1 |
适用于 | flex项,包括in-flow伪元素 |
继承性 | 无 |
动画性 | visual |
计算值 | 指定值 |
示例
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; }
效果图: