關於flex-grow的陷阱

前一陣在使用flex佈局進行寬度處理時，發現了flex-grow並非按照預期的狀況進行比例處理，頓時以爲有點懵逼。

在stackoverflow搜索以後，終於搞明白了其中的奧祕。

話很少說，直接上代碼：

.flex-container {
    display: flex;
    width: 100%;
}
.flex-item {
    flex-grow: 1;
    list-style-type: none;
}
.big {
    flex-grow: 3;
}

<ul class="flex-container">
    <li class="flex-item big">理論應該是小的三倍長</li>
    <li class="flex-item">但實際並非這樣</li>
</ul>

咱們參照阮一峯的flex教程就能夠看到對於這個屬性的解釋：

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

按照正常理解咱們的代碼沒有問題啊，怎麼比例並非設置的那樣呢？

重點來了，這裏的剩餘空間纔是關鍵。
對於一個flex-item來講，它的初始空間並非0，而是另外一個屬性值auto（元素內容佔用的空間）。

這樣就致使了咱們設置了flex-grow的效果並非將整個寬度進行等比例的拆分，而是對去除內容的寬度進行了比例劃分。

而若是想要打到咱們實際所想的效果，咱們就須要使用flex屬性來代替原來的。
由於根據MDN文檔的描述，咱們就知道了

flex規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性，能夠同時設置flex-grow,flex-shrink與flex-basis。

這樣咱們使用flex時只指定一個數字（寬度值會轉化成flex-basis）時，flex-basis會自動轉換爲0%，而數字正好轉換成了要設置的比例（flex-grow值）。

因而修改css代碼以下：

.flex-item {
    flex: 1;
}
.big {
    flex: 3;
}

這樣設置的比例就如咱們所願的顯示出來了。

ps.stackoverflow原問題連接