flex 簡寫詳解

1.      flex: flex-grow、flex-shrink 、flex-basis縮寫

2.      預設值: 

flex: 0 1 auto;

3.      flex:none;

flex:0 0 auto;

4.      flex:auto; 

 flex: 1 1 auto;

5.     單一非負數字：該值為flex-grow值，flex-shrink為1，flex-basis為0%

如    flex : 1;

相當於 : 

flex-grow: 1;
flex-shrink:1;
flex-basis: 1;

6.      flex取長度或百分比：該值為flex-basis的值，flex-grow為1，flex-basis為1。

如    flex: 0% ;

相當於:  

flex-grow: 1;
flex-shrink: 1;		
flex-basis: 0%;

如    flex: 24px;

相當於：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;

7.      flex取兩非負數字:分別為flex-grow和flex-shrink的值，flex-basis為0%;

如   flex: 2 3;

相當於：

flex-grow:2;
flex-shrink:3;
flex-basis:0%

8.      flex取一非負數字和一個長度或百分比：分別為flex-grow和flex-basis的值，flex-shrink為1

如    flex: 1 0%;

相當於：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-basis取值情況

1.      flex-basis規定元素的基準值

2.      auto: 首先檢索元素主尺寸，若不為auto，則取主尺寸值。若為auto，則取值為content

3.      content: 根據元素自動佈局

4.      百分比：根據父容器計算，如果父容器未定義尺寸，則計算結果等同故意auto

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width: 140px;
        flex: 2 1 0%;
    }
    .item-2 {
        width: 100px;
        flex: 2 1 auto;
    }
    .item-3 {
        flex: 1 1 200px;
    }
</style>
 

1.      主軸父容器尺寸：600px

2.      子元素總基準值：0% + auto + 200px =300px;

        0%          即0寬度

        auto        à對應item-2的尺寸，100px

3.      剩餘空間：600px-300px = 300px;

4.      放大比例2 + 2 + 1 = 5px;

5.      剩餘空間分配,item-1和item-2佔2/5，即120px,item-3佔1/5,60px

6.      所以

        tem-1: 0% + 120px = 120px

        item-2: auto + 120px = 220px

        item-3: 200px + 60px = 260px;