變形問題
flex布局中，當乙個元素定義了flex-grow，而其他元素沒定義flex-grow時，可能會將其他元素擠壓變形。這時給其他元素新增一下css樣式：
flex-shrink：0；
可以解決這個問題
省略號問題
在flex布局的大容器a中併排放置兩個子容器，並且子容器設定flex:1，子容器中都有乙個元素包含一段文字，這段文字設定了不換行並且顯示省略號的樣式，當文字過長的時候，子容器會被撐開，這裡的text-overflow: ellipsis;不生效，省略號沒有出現，並且過長的文字將子容器撐開，問題可能出在於子容器沒有設定寬度，省略符可能需要對父元素設定寬度，設定為100%無效，當設定為0的時候，省略號出現了。因為不設定寬度，子容器會被文字節點無限撐開，通過測試發現，也可以設定子容器overflow:hidden滿足效果。
flex grow遇到的問題
在進行flex布局的時候，會經常遇到flex grow無效這個問題 深入了解了一下，容器內item的flex grow屬性是按照父元素剩餘空間來分配的。flex grow重點說明落在剩餘這兩個字上，父元素剩餘的空間，那什麼算父元素剩餘空間呢,簡單的理解就是 父元素的寬度 子元素總和的寬度 這裡有兩種...
關於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，...