在進行flex布局的時候，會經常遇到flex-grow無效這個問題
深入了解了一下，容器內item的flex-grow屬性是按照父元素剩餘空間來分配的。
flex-grow重點說明落在剩餘這兩個字上，父元素剩餘的空間，那什麼算父元素剩餘空間呢,簡單的理解就是(父元素的寬度-子元素總和的寬度),這裡有兩種情況:
1、子元素沒有設定高度：
那麼整個父元素的width就是剩餘寬度，這個時候可以正常使用flex-grow.
2、子元素設定了寬度：
如果子元素有寬度,那麼這個時候flex-grow的作用就是把剩餘空間=(父元素寬度-子元素總和寬度)按照flex-grow的數值分配給每乙個子元素,這個時候flex-grow的作用就像是實實在在的width一樣,給子元素增加寬度,
在這種情況下的得到的效果就是乙個無法改變的分配好的寬度,即使你子元素a的內容超出了分配好的寬度,也不會影響寬度分配情況,你只能用overflow來更好地美觀一下啊,而這個就是我們希望的到的分配效果,**如下:
.a div
給每乙個div設定乙個width:0;然後進行分配flex-grow,這個時候加上去的寬度就是實實在在的width.
示例**入下：
class="a">
class="
b p">b
class="
c p">c
class="
d p">d
a.b .c
.d
flex grow帶來的排版問題
變形問題 flex布局中，當乙個元素定義了flex grow，而其他元素沒定義flex grow時，可能會將其他元素擠壓變形。這時給其他元素新增一下css樣式 flex shrink 0 可以解決這個問題 省略號問題 在flex布局的大容器a中併排放置兩個子容器，並且子容器設定flex 1，子容器中...
關於flex grow的陷阱
前一陣在使用flex布局進行寬度處理時，發現了flex grow並不是按照預期的情況進行比例處理，頓時覺得有點懵逼。在stackoverflow搜尋之後，終於搞明白了其中的奧秘。話不多說，直接上 flex container flex item big我們參照阮一峰的flex教程就可以看到對於這個屬...
flex shrink和flex grow的區別
flex shrink 當主軸方向顯示不下所有專案時，專案是否進行壓縮。預設值為1 取正整數，最小值為0，為0時表示不壓縮。那麼如何壓縮？簡單的思路 把主軸方向不夠的部分，按照幾個專案的值進行壓縮。實施的 如下 12 3 設定乙個大的div，裡面包含3個小的div，大的div設定的寬度為500px，...