flex還可以讓物件自動填充，給物件加上flex-grow，這可以讓容器有剩餘空間的情況下，物件自動補滿，他還會跟一個叫flex-basic有關
flex-basic:它代表物件在分配剩餘空間前的所占寬度或高度，當沒有設置時，以物件的原內容大小決定
原本情況

給div9添上flex-grow:1，div9將自動把剩餘的容器空間補滿

<div style="background-color: blanchedalmond;flex-grow: 1;">div9 </div>

當有複數物件都有flex-grow後則依照計算後再依據各自的flex-grow的比例來分配剩餘空間，

        <div style="background-color: lightcoral;flex-grow:1;">div7</div>
        <div style="background-color: lightsalmon;flex-grow: 3;">div8</div>
        <div style="background-color: blanchedalmond;flex-grow: 1;">div9 </div

計算的方式是flex-basic+flex-grow*(剩餘空間/flex-grow總和)
現在div和div9的flex-grow是1，div8是3，所以剩餘空間的分配是1:3:1，以div8舉例就是div8的flex-basic+3*(剩餘空間/1+3+1)

若是容器一行只容得下div8與div9的話，那麼分配的比例就會剩下3:1，算法變成flex-basic+3*(剩餘空間/1+3)

flex-shrink可以讓物件被擠壓時進行壓縮，數字越大則壓縮得越多

        <div >div1</div>
        <div style="background-color:pink;">div2</div> 
        <div style="background-color:lightblue;">div3</div>
        <div style="background-color: indianred;">div4</div>
        <div style="background-color: violet;flex-shrink: 1;">div5</div>

flex-shrink的算法，flex-basis × flex-shrink ÷ (flex-basis × flex-shrink)的總和 × 超出寬度

div5:flex-shrink是0的情況，不縮小

div5:flex-shrink是1的情況(默認)，與其他物件一起縮小

       <div style="background-color: violet;flex-shrink: 5;">div5</div>

div5:flex-shrink是5的情況，自己縮小來適應