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. mycat 全局表

    全局表的作用 在分片的情况下,当业务表因为规模而进行分片以后,业务表与这些附属的字典表之间的关联,就成了比较棘手的问题,考虑到字典表具有以下几个特性: 变动不频繁 数据量总体变化不大 数据规模不大,很 ...

  2. TTL电平,CMOS电平,232/485电平，OC门,OD门基础知识

     1.RS232电平 或者说串口电平,有的甚至说计算机电平,所有的这些说法,指得都是计算机9针串口 (RS232)的电平,采用负逻辑, -15v ~ -3v 代表1 +3v ~ +15v 代表0 2. ...

  3. CV学习日志：CV开发常用库及其头文件

    CV开发过程中,通常会涉及以下库:(1)语言/视觉:C.CPP.QT.OpenCV(2)通信/模拟:ROS2.Gazebo.Webots(3)日志/数学:Eigen3.Gflags.Glog.Cere ...

  4. 题解：POI2012 Salaries

    题解:POI2012 Salaries Description The Byteotian Software Corporation (BSC) has \(n\) employees. In BSC ...

  5. WPF开源控件扩展库 - MaterialDesignExtensions

    Material Design Extensions 在WPF开源控件库 Material Design in XAML Toolkit(本站介绍:链接)的基础上进行了控件扩展和特性新增.本开源项目中 ...

  6. oh my zsh 常用插件

    date: "2020-10-18T12:36:00+08:00" title: "oh my zsh 常用插件" tags: ["zsh" ...

  7. Golang数组和切片的区别

    大纲 数组是固定大小 切片不是动态数组,可以扩容 区别 定义方式不一样 初始化方法不一样 package main import "fmt" func main() { // -- ...

  8. ansible使用shell模块在受控机上执行命令(ansible2.9.5)

    一,ansible的shell模块和command模块的区别? shell模块:在远程主机上执行主控端发出的shell/python脚本 command模块:不能调用shell指令,没有bash的环境 ...

  9. Postgres 10.11安装教程

    Postgres搭建 考虑到Drone和Sonarqube等都需要借助Postgres存储,为了保证CI服务的高效的工作,将考虑独立其中依赖的数据库,避免在繁忙时占用过多资源从而影响整体CI的速度. ...

  10. Python基础数据类型方法补充

    str 补充的方法: capitalize():首字母大写,其余变小写 s = 'liBAI' s1 = s.capitalize() print(s1) # Libai swapcase():大小写 ...