重新認識flex縮寫屬性—[flex]

flex:1引發的疑惑

  flex是flex-grow,flex-shrink,flex-basis三個屬性值的縮寫，所以我也曾以為只是單純縮寫而已，沒什麼複雜的，直到看了flex:1能實現各子元素均分外層容器空間的效果：

  html和css程式碼如下：

   <div class="container">
       <div class="inner">我是左側的item</div>
       <div class="inner">我是右側的item,我的內容比較多</div>
   </div>

   .container{
        height:300px;
        width:400px;
        border:1px solid red;
        display:flex;
    }

    .inner{
        border:1px solid black;
        flex:1;
    }
複製程式碼

  按照我最初的理解，flex:1相當於設定了flex-grow:1,flex-shrink:1(預設值),flex-basis:auto(預設值)，而如果對元素這樣設定三個屬性值的話，效果如下圖2所示，明顯是水平均分的，因為flex-grow為1只是表示均分多餘的空間

  那麼問題來了，flex:1並不等價於flex-grow:1,flex-shrink:1(預設值),flex-basis:auto啊，說好的縮寫呢？

flex是縮寫

  flex是flex-grow,flex-shrink和flex-basis的縮寫，flex屬性值可以只指定一個屬性的值，而另外的屬性值採用各自在flex屬性中的的初始值，但是有一點要注意的是：flex屬性中flex-grow和flex-basis的初始值和它們原始的預設值不同，至於為什麼不同，mdn中有明確的說過這樣的設計是為了讓「flex」縮寫在最常見的情景下比較好用。

flex中對應各屬性的初始值

flex-grow

  flex-grow用於設定各item項按對應比例劃分剩餘空間，若flex中沒有指定flex-grow,則相當於設定了flex-grow:1

flex-shrink

  flex-shrink用於設定item的總和超出容器空間時，各item的收縮比例，若flex中沒有指定flex-shrink,則等同於設定了flex-shrink:1

flex-basis

  flex-basis用於設定各item項的伸縮基準值，可以取值為長度或百分比，如果flex中省略了該屬性，則相當於設定了flex-basis:0.

flex的不同取值

  flex的值的完整寫法是[<flex-grow> <flex-shrink> <flex-basis>],不過它的取值還有可能是單個數字或者單個百分比等，不同種類的取值所表示的意思是大有不同的。

flex值為none

  當flex為none時,等同於flex: 0 0 auto;

flex值為auto

  當flex為auto時，等同於flex: 1 1 auto;

flex值為一個非負數字

  當flex取值為一個數字，則該數字是設定的flex-grow值，其它兩個屬性用初始值，如flex:1時，等同於flex: 1 1 0%

flex值為兩個非負數字

  當flex取值為2個數字時，相當於設定的flex-grow和flex-shrink值，flex-basis取值為初始值，如flex:1 0時，等同於flex: 1 0 0%

flex值為一個數字和一個長度或百分比時

  當flex取值為1個數字和1個長度或百分比時，設定的是flex-grow和flex-basis的值，flex-shrink值時初始值，如flex:1 20%,等同於flex: 1 1 20%

  原來一個簡單的縮寫屬性flex是有這麼多花樣的~那麼我不想背它的初始值，不同值對應的縮放屬性等等，有這麼多原因，以後是不是不用flex就可以了，光明正大用flex-grow,flex-shrink,flex-basis就好了？當然是可以了~不過用flex至少還是有它的好處的，比如說看上去簡潔(一個flex屬效能有這麼多不同效果進而顯得高大上),還有重要的一點，同樣的一個單詞能完成三個單詞的工作，能使程式碼少啊:）