码迷,mamicode.com
首页 > 其他好文 > 详细

flex布局--flex-shrink的计算

时间:2020-06-09 14:50:39      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:png   收缩   lazy   splay   bsp   计算   isp   color   http   

 

html:

 

<div class="box">
        <div class="first">85.719</div>
        <div class="second">214.281</div>
</div>

css:

.box{
  width: 300px;
  display: flex;
}
.first{
  background: red;
  width: 100px;
  flex-shrink: 1;
}
.second{
  background: yellow;
  width: 300px;
  flex-shrink: 2;
}

结果展示:

技术图片

 

计算方法:

需要收缩的空间:100+300-300=100

每个子项目需要收缩的值:100n+300*2n=100; n=1/7

first宽度:100-100*1/7=85.719

second宽度:300-300*2*1/7 = 214.281

 

flex布局--flex-shrink的计算

标签:png   收缩   lazy   splay   bsp   计算   isp   color   http   

原文地址:https://www.cnblogs.com/Super-scarlett/p/13072321.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!