技術標籤：CSS

前言：在阮大大的flex教程中說：flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。大家會誤以為只寫flex的效果和flex-grow是完全一樣的，實則它們的計算方式是完全不同的，在使用時候要注意，使用正確的放大屬性，從而達到自己想要的效果。

1. flex的寬度計算方式是分配 "容器剩餘空間+具有flex屬性的元素自身尺寸"：
舉例：在一個width:400px的容器中，有a、b、c 三個width:100px的元素，給a元素flex:2的屬性，給b元素flex:1的屬性，不給c元素。

把這300px按2:1的比例分給a和b ，最後：a:width:200px ; b:width:100px ; c:width:100px

程式碼驗證：

 <style>
        .container {
            display: flex;
            width: 400px;
            height: 200px;
            background-color: red;
        }
        .a {
            width: 100px;
            flex: 2;
            background-color: blue;
        }
        .b {
            width: 100px;
            flex: 1;
            background-color: green;
        }
        .c {
            width: 100px;
            background-color: yellow;
        }
    </style>

    <div class="container">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
 

效果如下：

2. flex:grow的寬度計算方式是隻分配"容器剩餘空間",但是要加上元素自身的尺寸：
舉例：還是在一個width:400px的容器中，有a、b、c 三個width:100px的元素，給a元素flex-grow:2的屬性，給b元素flex-grow:1的屬性，不給c元素。
計算寬度的規則是：(1）容器剩餘空間400px-300px = 100px
把這剩餘的100px按2:1的比例分給a和b：（2）a：2份＋自身寬度100px （3）b：1份＋自身寬度100px
最後：a:width:166.7px ; b:width:133.3px ; c:width:100px

程式碼驗證：

    <style>
        .container {
            display: flex;
            width: 400px;
            height: 200px;
            background-color: red;
        }
        .a {
            width: 100px;
            flex-grow: 2;
            background-color: blue;
        }
        .b {
            width: 100px;
            flex-grow: 1;
            background-color: green;
        }
        .c {
            width: 100px;
            background-color: yellow;
        }
    </style>

    <div class="container">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
 

效果如下：

補充2個剩餘空間為0的例子：
1、 在一個width:300px的容器中，有a、b、c 三個width:100px的元素，給a元素flex:3的屬性，給b元素flex:2的屬性，不給c元素。
計算寬度是：剩餘空間0 + 參與flex專案尺寸200px ，按比例給a3份，b2份。
最後：a:width:120px ; b:width:80px ; c:width:100px

2、 在一個width:300px的容器中，有a、b、c 三個width:100px的元素，給a元素flex-grow:3的屬性，給b元素flex-grow:2的屬性，不給c元素。
計算寬度是：剩餘空間0 專案沒有可分配的空間，尺度不會發生變化。
最後：a:width:100px ; b:width:100px ; c:width:100px

附：本文參考文章https://blog.csdn.net/weixin_49684995/article/details/107880408