<style>
    .flex-box{
       display: flex;
       height:200px;
       width:100%;
       background:red;
     }

     .item:nth-child(2){
       flex:1;
       background:red;
     }
    </style>

    <div class="flex-box">
        <div class="item" style="width:200px;background:yellow"
 
>
            左
        </div>
        <div class="item">
            中
        </div>
        <div class="item"  style="width:200px;background:yellow">
            右
        </div>
    </div>

關鍵在於：flex:1;這個屬性

我們展開看一下這個屬性：

要明白這個三欄佈局的原理，其實就是要弄懂flex-grow，flex-shrink

flex-grow
屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

這裡重點是理解這個剩餘空間的含義:

我舉個例子瞭解一下：

     <style>
       .flex-box{
             display: flex;
             height:200px;
             width:500px;
             background:red;
        }

        .left{
             width:100px;
             background
 
:yellow;
        }

        .right{
             flex-grow:1;
             background:yellow;
        }
        .center{
             flex-grow:1;
             background:red;
        }
    </style>

    <div class="flex-box">
        <div class="left">
            left
        </div>
        <div class="center">
            center
        </div>
        <div class="right">
            right
        </div>
    </div>

整個flex容器大小我設定的為500px，我只給left設定了100px，那麼我們剩餘的空間的大小就為500-100-48-40=312px(為什麼要減去48和40呢？因為我們的'center和'right'文字也佔了空間)；
剩下的這312px就由具有flex-grow屬性的元素去分(left沒有設定該屬性，預設為0)，也就是我們的center和right去分，分的依據就是flex-grow的值，它們的值分別為1，代表著各佔剩餘空間的一份，那麼就是156px，最後再加上各自本身佔的空間，center為48+156=204px；right為40+156=196px；

flex-shrink
屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

    <style>
        .flex-box{
          display: flex;
          height:200px;
          width:400px;
          background:red;
        }

        .left{
            width:300px;
            flex-shrink:1;
            background:yellow;
        }

        .center{
            width:160px;
            flex-shrink:2;
            background:red;
        }

        .right{
            width:140px;
            flex-shrink:3;
            background:yellow;
        }
    </style>

    <div class="flex-box">
        <div class="left">
            left
        </div>
        <div class="center">
            center
        </div>
        <div class="right">
            right
        </div>
    </div>

整個容器大小為400px，left，center，right寬度分別為200px，160px，140px按照這個資料算下來，父容器的空間是不夠的，不考慮換行的情況下，我們需要利用到flex-shrink這個屬性，使得我們的內容按照一定的比例進行縮小；
首先算出溢位空間：400-200-160-140=-200px，溢位的200px需要按照一定的比例分配給left，center，right；由於它們的flex-shrink分別為1，2，3；我們設left為縮小比例為x，那麼center，right則為2x，3x;
根據等式200x+160*2x+140*3x=200
我們求出x=5/26；
最後根據這個縮小比例，分別求出left，center，right真實大小：
left:200*(1-5/26) =242.31 px
center:160*(1-5/26*2) =98.47 px
right:140*(1-5/26*3) = 59.23 px

flex-basis
屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

簡單的說這個屬性值可以理解為元素的width值；
如果flex-basis和width其中有一個是auto，那麼另外一個非auto的屬性優先順序會更高。同時賦值時，flex-basis的優先順序更高

介紹完了三個屬性，我們再回過頭來看flex實現三欄佈局的原理

我們left和right設定了固定的寬度，然後將flex-basis設定為0，使得容器的剩餘空間僅為容器總寬度減去left和right的寬度，不減去center本身內容的寬度，這裡可以借鑑一下上面說的flex-grow屬性中，我們的剩餘空間是包括減去自身內容寬度後的寬度；

然後設定flex-grow和flex-shrink設定為1，將剩餘的寬度全部分配給自己，不管寬度是有剩餘還是溢位，也達到了自適應的要求