flex-shrink为弹性盒模型中，当弹性项不断行，并且所有弹性项的宽度只和大于弹性盒模型的可分配空间时，弹性项的收缩程度。

找到英文资料对flex-shrink的定义描述：

flex-shrink规定了弹性收缩系数。当分配负可用空间时，弹性收缩系数决定了弹性项相对于弹性容器中的其他弹性项的收缩程度。当省略时，默认设置为1。

注意：当分配负可用空间时，弹性收缩系数乘以弹性项基本尺寸。这使得分配负空间与弹性项收缩的程度成比例，如此以来，在大的弹性项有明显的减少前，小的弹性项不会收缩到0。

W3C中对于flex-shrink原文定义：

This component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.

Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.

原文链接：https://www.w3.org/TR/css-flexbox-1/#flex-flex-shrink-factor

flex-shrink计算实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>flex-shrink计算实例</title>

    <style>

        #content {

            display: flex;

            width: 500px;

        }

        .boxA {

            flex-shrink: 1;

            flex-basis: 50px;

        }

        .boxB {

            flex-shrink: 2;

            flex-basis: 100px;

        }

        .boxC {

            flex-shrink: 3;

            flex-basis: 150px;

        }

        .boxD {

            flex-shrink: 4;

            flex-basis: 200px;

        }

        .boxE {

            flex-shrink: 5;

            flex-basis: 250px;

        }

    </style>

</head>

<body>

    <div id="content">

        <div class="boxA" style="background-color:red;">A</div>

        <div class="boxB" style="background-color:lightblue;">B</div>

        <div class="boxC" style="background-color:yellow;">C</div>

        <div class="boxD" style="background-color:brown;">D</div>

        <div class="boxE" style="background-color:lightgreen;">E</div>

    </div>

</body>

</html>

　　

本例中A、B、C、D、E的flex-basic值分别设为50px、100px、150px、200px、250px，flex-shrink的值分别设置为：1、2、3、4、5。

分配负空间的量：50+100+150+200+250-500=250px;

A应该分配的份额比例：50x1/(50x1+100x2+150x3+200x4+250x5)=50/2750;

A分配负空间的量:250x50/2750≈4.545px;

A实际弹性长度：50-4.545=45.455px;

flex-shrink值的计算的更多相关文章

  1. flex属性值----弹性盒子布局

    里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法:   display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...

  2. BERT模型在多类别文本分类时的precision, recall, f1值的计算

    BERT预训练模型在诸多NLP任务中都取得最优的结果.在处理文本分类问题时,即可以直接用BERT模型作为文本分类的模型,也可以将BERT模型的最后层输出的结果作为word embedding导入到我们 ...

  3. [20171227]表的FULL_HASH_VALUE值的计算.txt

    [20171227]表的FULL_HASH_VALUE值的计算.txt --//sql_id的计算是使用MD5算法进行哈希,生成一个128位的Hash Value,其中低32位作为HASH VALUE ...

  4. git commit -a -m "DM 1、获取aliOssSTS值，计算签名，实现视频PUT/POST2种上传方式上传；"

    git commit -a -m "DM 1.获取aliOssSTS值,计算签名,实现视频PUT/POST2种上传方式上传:" 微信小程序的视频上传

  5. matlab(8) Regularized logistic regression : 不同的λ(0,1,10,100)值对regularization的影响，对应不同的decision boundary\ 预测新的值和计算模型的精度predict.m

    不同的λ(0,1,10,100)值对regularization的影响\ 预测新的值和计算模型的精度 %% ============= Part 2: Regularization and Accur ...

  6. SPSS详细教程：OR值的计算

    SPSS详细教程:OR值的计算 一.问题与数据 研究者想要探索人群中不同性别者喜欢竞技类或娱乐性体育活动是否有差异.研究者从学习运动医学的学生中随机招募50名学生,记录性别并询问他们喜欢竞技类还是娱乐 ...

  7. hash值的计算与转换 分类： ACM TYPE 2015-05-07 17:49 36人阅读 评论(0) 收藏

    #include <bits/stdc++.h> using namespace std; const int MAXN = 100; const int X = 3; long long ...

  8. CSS学习（7）继承、属性值的计算过程

    子元素会继承父元素的某些css属性 通常跟字体相关的属性都能被继承,具体的可以在mdn里查询是否是可继承属性 属性值的计算过程(渲染过程) 按照页面文档的树形目录结构进行依次渲染 前提条件:渲染的元素 ...

  9. c++实现之 -- 文章TF-IDF值的计算

    首先,是关键词的选取: 好吧这个我这模型实在是太简单了,但还是讲一讲比较好呢... 我们现在手头有的是一堆百度百科词条w的DF(w, c)值,c是整个百科词条...原因是...方便嘛~(而且人家现成的 ...

随机推荐

  1. 多测师讲解自动化测试 _RF封装_（三层模式）高级讲师肖sir

    rf自动化:分层作用: 1.项目----有重复的流程(借款-登录,出借-登录) 2.借款--登录(8个流程)机器人:案例层(用例)写在机器人中,1个机器人=1条用例 分三个层次: 1.案例层(存放用例 ...

  2. 多测师_高级肖sir分享pycharm中设置主题和设置代码颜色方法

    一.修改pycharm中的主题颜色 二.修改代码颜色 File-->Settings-->Editor--> Color Scheme-->Language Defaults- ...

  3. MeteoInfoLab脚本示例：计算垂直螺旋度

    尝试编写MeteoInfoLab脚本计算垂直螺旋度,结果未经验证. 脚本程序: print 'Open data files...' f_uwnd = addfile('D:/Temp/nc/uwnd ...

  4. MeteoInfoLab脚本示例：获取一维数据并绘图

    气象数据基本为多维数据(通常是4维,空间3维加时间维),只让数据中一维可变,其它维均固定即可提取一维数据.比如此例中固定了时间维.高度维.纬度维,只保留经度维可变:hgt = f['hgt'][0,[ ...

  5. Prometheus入门教程（二）：Prometheus + Grafana实现可视化、告警

    文章首发于[陈树义]公众号,点击跳转到原文:https://mp.weixin.qq.com/s/56S290p4j9KROB5uGRcGkQ Prometheus UI 提供了快速验证 PromQL ...

  6. mysql 操作数据库

    创建数据库 CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name(数据库名字) #添加 IF NOT EXISTS,如果已有数据库,将会提醒,不会出现错 ...

  7. spring boot:spring security实现oauth2+jwt管理认证授权及oauth2返回结果格式化(spring boot 2.3.3)

    一,为什么oauth2要整合jwt? 1,OAuth2的token技术有一个最大的问题是不携带用户信息,所以资源服务器不能进行本地验证, 以致每次对于资源的访问,资源服务器都需要向认证服务器的toke ...

  8. ImageMagick:用identify检查图片是否完整?(jpg/gif/png图片是否损坏)

    一,常用图片格式的结束标志是什么? 1,Jpg格式的文件在16进制中的表示是以 ff d9 两个字节结尾 2,  gif格式的文件,结尾是 3b 3,  png格式的文件,结尾是  00 00 00 ...

  9. UML类图还不懂？来看看这版乡村爱情类图，一把学会！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.码场心得

  10. Prometheus入门教程（三）：Grafana 图表配置快速入门

    文章首发于[陈树义]公众号,点击跳转到原文:https://mp.weixin.qq.com/s/sA0nYevO8yz6QLRz03qJSw 前面我们使用 Prometheus + Grafana ...