首页 > 其他 > 详细

flex-shrink 计算公式

时间:2020-07-12 13:46:03      阅读:73      评论:0      收藏:0      [点我收藏+]

box-shrink:(每个盒子的宽度 x box-shrink所占比例) ÷ (每个盒子的宽度 x box-shrink所占比列 相加 之和 ) × 多出来的剩余空间
以下例子:

.wrapper {
            width: 600px;
            height: 300px;
            display: flex;
    }

.wrapper .content {
            width: 200px;
            height: 100px;
            box-sizing: border-box;
            flex-grow: 1;
    }

.wrapper .content:last-of-type {
            width: 400px;
            flex-shrink:4;
    }
<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
</div>
我可以得出前两个div所压缩比例空间:
200*1 + 200*1 + 400*4=2000;

//计算前两个div压缩值
200*1
------- * 200= 20   压缩值20
2000

//计算最后一个div压缩值
400*4
------- * 200 =160 压缩值 160
2000


得出:
    第一个div和第二个div的宽度为180  
    低三个div为宽度为 400-160=240
    


```1.

flex-shrink 计算公式

原文:https://www.cnblogs.com/pengyinghao/p/13287967.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!