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. How to install the NVIDIA drivers on Fedora 32

    https://linuxconfig.org/how-to-install-the-nvidia-drivers-on-fedora-32 The NVIDIA Driver is a progra ...

  2. GML与KML的区别

    1.GML是基于XML的地理信息的传输.存储编码,它包括空间的和非空间的地理特征和地理范畴.GML是空 间数据编码.传输.存储.发布的国际标准KML是一个OGC标准 2.GML专注于地理信息的结构与内 ...

  3. 转一个veth的文章

    这篇写的很好,清晰明白,保存一下https://www.cnblogs.com/bakari/p/10613710.html

  4. pytest文档41-参数化 ids 用例描述为中文时控制台输出unicode编码问题（pytest_collection_modifyitems）

    前言 使用 pytest.mark.parametrize 参数化的时候,加 ids 参数用例描述有中文时,在控制台输出会显示unicode编码,中文不能正常显示. 使用 pytest_collect ...

  5. xuexi

    1.内存的编址方法就是内存地址与内存单元格一一对应且永久绑定.计算机的cpu只认识内存地址,不关心内存单元格的位置和内容.通过硬件的设计来达到通过内存地址找到内存单元格. 2.内存的编址是以字节为单位 ...

  6. maven项目导入eclipse报错

    错误提示: 原因:未安装maven,缺少ojdbc6.jar包 解决: 一.安装maven 第一步百度搜索Maven官网,进去之后,下载apache-maven-3.5.3-bin.zip,下载完成之 ...

  7. ASP.NET 获取客户端IP地址

    我们用Request.ServerVariables( "REMOTE_ADDR ")   来取得客户端的IP地址, 但如果客户端是使用代理服务器来访问,那取到的就是代理服务器的I ...

  8. Markdown基础知识

    一 Markdown简介 Markdown是⼀种可以使⽤普通⽂本编辑器编写的标记语⾔,通过简单的标记语法,它可以使普通⽂本内容具有⼀定的格式,可以简单理解为纯⽂本格式的word. 软件⼀般⽤vscod ...

  9. CC2530定时器模模式最大值计算

    首先假设 频率: f 分频系数: n 间隔定时: s 周期: T 模模式最大值: N 因为 T = 1 / f 所以 s = ( n / f ) * N  =  n * N / f 由此可得 计算模模 ...

  10. VScode如何配置c/c++运行环境

    vscode如何配置c/c++环境 下载 Mingw 参考链接:https://blog.csdn.net/jiqiren_dasheng/article/details/103775488 笔者下载 ...