2025-09-26 08:31:24  50 0

flex布局flex-shrink算法

 标签：   

css3 

flex-shrink 算法详解

flex-shrink 属性用于设置或检索弹性盒的收缩比率。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

默认值：1
继承：否
可动画化：是
版本：CSS3
JavaScript 语法：object.style.flexShrink="5" 

示例代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flexTest {
            display: flex;
            width: 600px;

        }

        .item {

            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #c3c3c3;

        }

        .item2,
        .item3 {
            flex-shrink: 2;
        }

        /* 
        默认  flex-shrink: 1; 的情况下
        可以看到设置了margin 10 左右就是20 一共6个 超出了120px
        公式就是 120/6=20  每个item宽度是100  所以缩放后的宽度为：100-20 =80px 
        如果 给 item2和3 设置  flex-shrink: 2 那么计算如下：
        1+2+2+1+1+1 =8
        120 /8 =15
        第一个item  100-15=85 第二是两份  100-15*2 = 70  
        由此得出 有几份就 乘以  120除以 总分数 的结果
        */
    </style>
</head>

<body>
    <div class="flexTest">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
    </div>
</body>

</html>

算法如下：

默认  flex-shrink: 1; 的情况下

        可以看到设置了margin 10 左右就是20 一共6个 超出了120px

        公式就是 120/6=20  每个item宽度是100  所以缩放后的宽度为：100-20 =80px

        如果 给 item2和3 设置  flex-shrink: 2 那么计算如下：

        1+2+2+1+1+1 =8

        120 /8 =15

        第一个item  100-15=85 第二是两份  100-15*2 = 70  

        由此得出 有几份就 乘以  120除以 总分数 的结果

    如图所示：我们给类 item2，item3 设置了缩放 根据算法 宽度应该是70  没有设置缩放的应该是80

image.png

可以看到item1 的宽度是85 符合算法的结果，设置了缩放item2和item3 是70

image.png