對于Flex布局，之前已經做過一些說明，其功能非常強大好用，但因為版本問題，與瀏覽器兼容方面還需要做一些處理，現在和你們談談我使用時所踩過的常見的坑。
1.兼容性的坑
一般我們用flex布局經常開發一些手機端的頁面，但是手機端也分為安卓以及IOS系統，這兩大系統對flex的兼容還是有所差別的，flex布局從09年開始到現在已經有5個版本，所以如果要寫兼容語法的話，最少要寫兩種方式，不僅減慢了開發速率，而且還不一定準，畢竟要記那么多語法，很容易造成混亂，所以建議使用gulp 編寫SASS來管理自己的css 。
http://www.lxweimin.com/p/fae68c0e2412

2.自適應的坑
在手機端，我們可能需要讓兩大塊元素左右對齊，這個對flex有所了解的會感覺，這太簡單了；
我們還可能讓其中一個元素定死寬度，讓另一個元素自適應，前提是兩個元素row排列，經過大腦一想，還使用flex比較好，我們想象之中是這個樣子的：

左邊150px，右邊自適應

而實際確實這個樣子的：

變形了

可以看出，這時候左邊的布局其實已經變形了。

在老版本的flex中，其實是不會出現這種效果的，而新版本的flex布局卻加入了一個屬性，就是當一個元素的空間不夠的時候，就會默認自動擠壓另外一個元素。

就是flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

.item { 
    flex-shrink: <number>; /* default 1 */
}```
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。

這個屬性是對單獨的子元素定義的，如果定義flex-shrink : 0;當空間不足時，元素仍會保持原有大小。