flex-shrink与flex-basis的示例

2022-01-05 15:20:46 阅读:2 编辑 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #content {
            display: flex;
            width: 500px;
        }

        #content div {
            flex-basis: 120px;
        }

        .box {
            flex-shrink: 1;
        }

        .box1 {
            flex-shrink: 2;
        }
    </style>
</head>
<body>
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
    <div class="box1" style="background-color:brown;">D</div>
    <div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

当前实例：

最后结果: A,B,C的宽度为105.719px D,E的宽度为91.422

105.719 = 120 - ((5 * 120 - 500 ) / 7 ) 不够剩余的空间100px,每项分摊多少（就是减多少，flex-shrink越多减越多）

91.422 = 120 - （((5 120 - 500 ) / 7 ) 2）