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. protoc-c 安装记录

    记录下 protobuf-c 安装过程中的问题. 1) 安装的时候没细看依赖. --  protobuf-c requires a C compiler, a C++ compiler, protob ...

  2. Linux nginx 安装 启动

    nginx下载地址:https://nginx.org/download/ ## 解压 tar -zxvf nginx-1.9.9.tar.gz ##进入nginx目录 cd nginx-1.9.9 ...

  3. 多测师讲解接口测试 _linux中搭建环境cms_高级讲师肖sir

    cms后台的搭建, 我们主要是用来做接口测试和接口自动化测试: 我们搭建的流程和之前搭建多有米一样: 后期给我们一个war包就要知道搭建一个文档: 要知道环境项目怎么讲?   讲解下搭建cms环境的流 ...

  4. Mac zsh中所有命令失效

    参考文章 https://blog.csdn.net/hujincai_55/article/details/95680245?utm_medium=distribute.pc_relevant.no ...

  5. MeteoInfoLab脚本示例：合并数组

    对于全球数据来说,经度要么是-180 - 180,要么是0 - 360,都会存在边界数据不连续的问题.比如0 - 360的数据,怎么得到 -20 - 30度的连续格点数据就是个问题(跨越了数据的经度边 ...

  6. [leetcode] 剑指 Offer 专题（一）

    又开了一个笔记专题的坑,未来一两周希望能把<剑指Offer>的题目刷完

  7. iNeuOS工业互联平台，设备容器（物联网）改版，并且实现设备数据点的实时计算和预警。发布3.2版本

    目       录 1.      概述... 2 2.      平台演示... 2 3.      设备容器新版本介绍... 2 4.      全局数据计算及预警平台... 3 5.      ...

  8. php使用xpath爬取内容

    <?php $html = file_get_contents('https://tieba.baidu.com/f?kw=%C9%EE%BB%A7&fr=ala0&loc=re ...

  9. 《Kafka笔记》2、环境搭建、Topic管理

    目录 一.Kafka环境搭建和Topic管理 1 单机环境搭建 1.1 环境准备 1.1.1 JDK 安装 1.1.2 配置主机名和ip 1.1.3 关闭防火墙和防火墙开机自启动 1.1.4 zook ...

  10. js鼠标、键盘事件实例代码

    1. 鼠标的哪个按键被点击? <html> <head> <script type="text/javascript"> function wh ...