10-flex-shrink

七色的天空

已于 2023-12-18 07:28:32 修改

阅读量393

点赞数 9

分类专栏： 07_移动端文章标签：移动端

于 2023-12-05 00:09:26 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/134796316

版权

07_移动端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width:500px;
            height: 200px;
            background-color: skyblue;
            display:flex;
        }
        .main div{
            width:600px;
            height:100px;
            background-color: pink;
            /* flex-shrink: 1;自动收缩,跟容器大小相同 */
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <!-- <div>2</div> -->
    </div>
</body>
</html>

上述运行结果:

若flex-shrink: 0;则收缩的部分将不再收缩。

上述运行结果:

若flex-shrink: 0.5;则收缩的部分将只收缩原来的0.5倍。

上述运行结果:

如果有多个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width:500px;
            height: 200px;
            background-color: skyblue;
            display:flex;
        }
        .main div:nth-of-type(1){
            width:300px;
            height: 100px;
            background-color: pink;
        }
        .main div:nth-of-type(2){
            width:400px;
            height: 100px;
            background-color: pink;
        }
        
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

如上述代码,在不设置flex-shrink的情况下,2个div的flex-shrink默认值都为1

那么,由于300+400-500 = 200,即需要的收缩值为200,默认情况加按div原大小的比例收缩

div1收缩后,值为300 - 3/7*200

div2收缩后,值为400 - 4/7*200

如果各自设置了 flex-shrink

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width:500px;
            height: 200px;
            background-color: skyblue;
            display:flex;
        }
        .main div{
            width:500px;
            height:100px;
            background-color: pink;
            /* flex-shrink: 1;自动收缩,跟容器大小相同 */
        }
        .main div:nth-of-type(1){
            width:300px;
            height: 100px;
            background-color: pink;
            flex-shrink: 2;
        }
        .main div:nth-of-type(2){
            width:400px;
            height: 100px;
            background-color: pink;
            flex-shrink: 1;
        }

    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

div1收缩后,值为300 - 6/10*200

div2收缩后,值为400 - 4/10*200

6/10是div1的300*2(div1的flex-shrink值) / 300*2+400*1

4/10是div2的400*1(div2的flex-shrink值) / 300*2+400*1