关于伸缩盒子 flexbox 的flex-shrink属性

注:今天在用swiper.js做商品轮播图的时候,遇到了在使用flexbox的前提下,子元素设置flex:1;所有子元素被挤在一期的现象(未执行到swipe);

原因竟然是因为没有设置:flex-shrink属性。

flex-shrink<number>

默认值:1

适用于:flex子项

继承性:无

动画性:是

计算值:指定值

取值:

<number>用数值来定义收缩比率。不允许负

说明:

设置或检索弹性盒的收缩比率。
  • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
    <ul class="flex">
        <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;}
    flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
    
    本例中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
    • 对应的脚本特性为flexGrow
posted @ 2015-11-30 12:31  自由行走的猪  阅读(3555)  评论(0编辑  收藏  举报