彈性盒模型中flex-grow 和flex的區別

我是豬姐呀丶發表於2020-06-27
模型Flex

在flex彈性盒模型體系中，flex-grow和flex都有對子元素進行放大的作用，但是這兩個屬性在放大時的計算方法不同，在使用時候要注意，使用正確的放大屬性，從而達到自己想要的效果。

先來看下兩個屬性的不同之處吧~

這是一個寬600px的彈性盒子，其中每個子元素的寬度都為100px。我們分別使用flex和flex-grow對子元素進行放大。

使用flex進行放大

<!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>
        article {
            width: 600px;
            height: 200px;
            margin: 50px auto;
            display: flex;
            border: 1px dashed black;
        }
        
        div {
            width: 100px;
            height: 100px;
        }
        
        div:nth-child(1) {
            flex: 1;
            background-color: darkorange;
        }
        
        div:nth-child(2) {
            flex: 2;
            background-color: skyblue;
        }
        
        div:nth-child(3) {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>

</html>

頁面效果

使用flex放大子元素：
step1：計算剩餘空間，剩餘空間為彈性盒子剩餘的寬度與進行flex的子元素的寬度之和。
例中的剩餘寬度為300px ，進行flex的子元素寬度分別是100,100，所以剩餘空間為500px。
step2: 按照進行flex屬性值、數字的比例進行分配空間。第一個div和第二個div的比例為1:2。因此其寬度分別為166.66px,333.34px。

使用flex-grow進行放大

<!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>
        article {
            width: 600px;
            height: 200px;
            margin: 50px auto;
            display: flex;
            border: 1px dashed black；
        }
        
        div {
            width: 100px;
            height: 100px;
        }
        
        div:nth-child(1) {
            flex-grow: 1;
            background-color: darkorange;
        }
        
        div:nth-child(2) {
            flex-grow: 2;
            background-color: skyblue;
        }
        
        div:nth-child(3) {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <article>
        <div>flex-grow: 1;
            <p>199.34px</p>
        </div>
        <div>flex-grow: 2;
            <p>298.66px</p>
        </div>
        <div>3
            <p>100px</p>
        </div>
    </article>
</body>

</html>

頁面效果

使用flex-grow放大子元素
step1：計算剩餘空間，剩餘空間為彈性盒子的剩餘寬度。
例中的剩餘寬度為300px
step2: 按照進行flex屬性值，數字的比例進行分配空間。第一個div和第二個div的比例為1:2。因此其寬度分別為100px ,200px。
step3：元素自身的寬度加上分配到的剩餘空間就是放大後的寬度。因此其最終顯示出來寬度分別為200px ,300px。

相關文章