彈性盒子中 flex: 0 1 auto

三個參數分別對應的是 flex-grow, flex-shrink 和 flex-basis，默認值爲0 1 auto。
1.flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
2.flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
3.flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。

 

<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>