flex-grow

最新推荐文章于 2024-07-23 23:45:34 发布

高手坟墓丶

最新推荐文章于 2024-07-23 23:45:34 发布

阅读量923

点赞数

本文链接：https://blog.csdn.net/qq_31070475/article/details/54588023

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、The sum of the length of the whole inner div < the outer div

<!doctype html>
<html>
<head>
    <style type="text/css">
        #main{
            border: 1px solid black;    
            width: 150px;
            height: 300px;
            display: flex;
        }
        #div1{
            width: 50px;
            height: 70px;
            background-color: pink;
            flex-grow:2;
            }
        #div2{
            flex-grow:1;
            width: 50px;
            height: 70px;
            background-color: orange;
        }
        #div3{
            flex-grow:1;
            width: 50px;
            height: 70px;
            background-color: green;
        }
        #div4{
            flex-grow:1;
            width: 50px;
            height: 70px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>

这里写图片描述
As you can see in the picture,sum of the length of the four div should be 50*4=200px,but the outer div is 150px,so each div will be reduced to 150/4=37.5px equally.The flex-grow does not work.

2、The sum of the length of the whole inner div > the outer div

<!doctype html>
<html>
<head>
    <style type="text/css">
        #main{
            border: 1px solid black;    
            width: 400px;
            height: 300px;
            display: flex;
        }
        #div1{
            width: 50px;
            height: 70px;
            background-color: pink;
            flex-grow:2;
            }
        #div2{
            flex-grow:1;
            width: 50px;
            height: 70px;
            background-color: orange;
        }
        #div3{
            flex-grow:1;
            width: 50px;
            height: 70px;
            background-color: green;
        }
        #div4{
            flex-grow:1;
            width: 50px;
            height: 70px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>

这里写图片描述
The flex-grow of div1 is 2,and others is 1,so the width of div1 is 50+2/(2+1+1+1)*(400-50*4)=130px.It just add the proportion of spare space.