zoukankan      html  css  js  c++  java
  • flex-shrink值的计算

    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;
                 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;

  • 相关阅读:
    vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
    appium 问题四的解决办法(模拟器打开的页面弹出框与脚本打开页面的弹出框不一致)
    appium 自动化问题三--键盘关键字的使用
    RF+appium自动化问题二解决思路
    appium自动化滑动鼠标滚动条的用法
    appium自动化中元素定位碰到的问题一
    appium自动化时,输入中文不显示的问题解决
    appium自动化模拟器使用
    pycharm 无法识别selenium,appium等工具时的解决办法
    Mysql基础学习(二)之DQL的使用
  • 原文地址:https://www.cnblogs.com/f6056/p/11662998.html
Copyright © 2011-2022 走看看