前一陣在使用flex布局進行寬度處理時，發現了flex-grow並不是按照預期的情況進行比例處理，頓時覺得有點懵逼。
在stackoverflow搜尋之後，終於搞明白了其中的奧秘。
話不多說，直接上**：
.flex-container
.flex-item
.big
按照正常理解我們的**沒有問題啊，怎麼比例並不是設定的那樣呢？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
.big
ps.stackoverflow原問題鏈結
flex shrink和flex grow的區別
flex shrink 當主軸方向顯示不下所有專案時，專案是否進行壓縮。預設值為1 取正整數，最小值為0，為0時表示不壓縮。那麼如何壓縮？簡單的思路 把主軸方向不夠的部分，按照幾個專案的值進行壓縮。實施的 如下 12 3 設定乙個大的div，裡面包含3個小的div，大的div設定的寬度為500px，...
flex grow遇到的問題
在進行flex布局的時候，會經常遇到flex grow無效這個問題 深入了解了一下，容器內item的flex grow屬性是按照父元素剩餘空間來分配的。flex grow重點說明落在剩餘這兩個字上，父元素剩餘的空間，那什麼算父元素剩餘空間呢,簡單的理解就是 父元素的寬度 子元素總和的寬度 這裡有兩種...
flex grow帶來的排版問題
變形問題 flex布局中，當乙個元素定義了flex grow，而其他元素沒定義flex grow時，可能會將其他元素擠壓變形。這時給其他元素新增一下css樣式 flex shrink 0 可以解決這個問題 省略號問題 在flex布局的大容器a中併排放置兩個子容器，並且子容器設定flex 1，子容器中...