flex屬性取值

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/qq_26598303/article/details/52841087

第一種情況flex屬性不寫

flex屬性默認是0 1 auto
flex-grow爲0，則存在剩餘空間也不放大
flex-shrink爲1，則空間不足該項目縮小
flex-basis爲auto，則該項目本來的大小
原始代碼：

<style>
    .parent {
        display: flex;
        width: 600px;
        background-color: currentColor;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width: 100px;
        background: blue;
    }
    .item-2 {
        width: 100px;
        background: green;
    }
</style>
<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
</div>

效果圖：

第二種情況其中一個元素flex屬性爲一個非負數字

flex:1相當於
flex-grow爲1
flex-shrink爲1
flex-basis爲0%

這裏的計算過程是這樣的：
由於item-1什麼都沒設，所以flex-basis爲auto保持原來的大小即100px
item-2設置了flex:1，因爲它的flex-basis爲0%
所以剩餘空間爲：600 - 100 - 0% = 500px
因爲item-2的flex-grow爲1，所以這500px全部分配給item-2，所以item-2就爲500px

第三種情況兩個元素flex屬性都爲一個非負數字

它們將均分剩餘空間，即各佔300px

第四種情況flex-basis爲一個固定數字

item-1爲 flex: 1 1 100px;
item-2爲 flex: 1 1 200px;

計算過程：
剩餘空間爲：600 - 100 - 200 = 300px
因爲它們的flex-grow爲1，所以剩餘空間的就平均分配，即每項150px
在這裏flex-basis設爲固定值，相當於元素大小就爲這個值
所以item-1爲 100 + 150 = 250px
item-2爲 200 + 150 = 350px