• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    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;
    }
    

    效果图:

    上篇:flex-grow

    下篇:place-items