flex屬性詳解

在拜讀了阮一峯的flex佈局教程和HaoyCn有關flex屬性的回答後整理成此文章，以便加深印象。

flex屬性是flex-grow,flex-shrink,flex-basis三個屬性的簡寫形式。

flex佈局包括外部的容器和內部的項目，flex屬性是項目的屬性。

若干個項目設置好flex屬性後，會有初始指定的佔用空間x(具體的寬度值)，若父元素容器寬度值y大於子元素項目的佔用空間x時，y-x便稱做剩餘分配空間。

現將flex屬性詳細狀況整理以下：

實例講解（借用HaoyCn的答案）

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

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

主軸上父容器總尺寸爲 600px
子元素的總基準值是：0% + auto + 200px = 300px，其中

0% 即 0 寬度
auto 對應取主尺寸即 100px

故剩餘空間爲 600px - 300px = 300px
伸縮放大係數之和爲： 2 + 2 + 1 = 5

---

剩餘空間分配以下：

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px

---

各項目最終寬度爲：

item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px

---

當 item-1 基準值取 0% 的時候，是把該項目視爲零尺寸的，故即使聲明其尺寸爲 140px，也並無什麼用，形同虛設
而 item-2 基準值取 auto 的時候，根據規則基準值使用值是主尺寸值即 100px，故這 100px 不會歸入剩餘空間

參考資料：
阮一峯 Flex 佈局教程：語法篇
阮一峯 Flex 佈局教程：實例篇
flex設置成1和auto有什麼區別-HaoyCn的回答