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

先來看下兩個屬性的不一樣之處吧~flex

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

使用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>

頁面效果spa

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

3d

使用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>

頁面效果code

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

htm

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

使用flex進行放大

使用flex-grow進行放大