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. 算法进阶 （LIS变形） 固定长度截取求最长不下降子序列【动态规划】【树状数组】

    先学习下LIS最长上升子序列 ​ 看了大佬的文章OTZ:最长上升子序列 (LIS) 详解+例题模板 (全),其中包含普通O(n)算法*和以LIS长度及末尾元素成立数组的普通O(nlogn)算法,当然还 ...

  2. C和C++区别——前置自增与后置自增

    一.先看下面两段完全一样的代码块 /* test.cpp */ int main() { int a = 5; ++a = 7; printf("%d\n", a); return ...

  3. 加密sqlite3数据库文件

    目录 EncryptSqlite3 实现原理 使用方法 不足之处 GitHub地址 EncryptSqlite3 加密sqlite3数据库,产生的数据库文件别人打不开. 实现原理 在写入文件前对每个字 ...

  4. set的运用 例题5-3　安迪的第一个字典（Andy's First Dictionary，Uva 10815）

    #include<bits/stdc++.h>using namespace std;set<string> dict;int main(){ string s, buf; w ...

  5. github 如何解决error: failed to push some refs

    错误 error: failed to push some refs to 'https://github.com/whitclass/scrapy-spider.git' hint: Updates ...

  6. hugo网站配置聊天

    date: "2020-10-18T22:11:05+08:00" title: "hugo网站配置聊天" tags: ["dao"] ca ...

  7. linux(centos8): 临时关闭/永久关闭交换分区swap？

    一,为什么要关闭swap? 1,swap的用途? swap 分区就是交换分区,(windows平台叫虚拟内存) 在物理内存不够用时, 操作系统会从物理内存中把部分暂时不被使用的数据转移到交换分区, 从 ...

  8. php查看进程

      index.php <?php /** * Created by PhpStorm. * User: mac * Date: 2020/4/23 * Time: 21:57 */ echo ...

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

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

  10. Martyr2项目实现——Number部分问题求解(3) Prime Factorization

    Martyr2项目实现--Number部分问题求解(3) Prime Factorization 质因子分解 问题描述: Prime Factorization – Have the user ent ...