對(duì)于Flex布局，之前已經(jīng)做過一些說明，其功能非常強(qiáng)大好用，但因?yàn)榘姹締栴}，與瀏覽器兼容方面還需要做一些處理，現(xiàn)在和你們談?wù)勎沂褂脮r(shí)所踩過的常見的坑。
1.兼容性的坑
一般我們用flex布局經(jīng)常開發(fā)一些手機(jī)端的頁面，但是手機(jī)端也分為安卓以及IOS系統(tǒng)，這兩大系統(tǒng)對(duì)flex的兼容還是有所差別的，flex布局從09年開始到現(xiàn)在已經(jīng)有5個(gè)版本，所以如果要寫兼容語法的話，最少要寫兩種方式，不僅減慢了開發(fā)速率，而且還不一定準(zhǔn)，畢竟要記那么多語法，很容易造成混亂，所以建議使用gulp 編寫SASS來管理自己的css 。
http://www.itdecent.cn/p/fae68c0e2412

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

左邊150px，右邊自適應(yīng)

而實(shí)際確實(shí)這個(gè)樣子的：

變形了

可以看出，這時(shí)候左邊的布局其實(shí)已經(jīng)變形了。

在老版本的flex中，其實(shí)是不會(huì)出現(xiàn)這種效果的，而新版本的flex布局卻加入了一個(gè)屬性，就是當(dāng)一個(gè)元素的空間不夠的時(shí)候，就會(huì)默認(rèn)自動(dòng)擠壓另外一個(gè)元素。

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

.item { 
    flex-shrink: <number>; /* default 1 */
}```
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。
如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。負(fù)值對(duì)該屬性無效。

這個(gè)屬性是對(duì)單獨(dú)的子元素定義的，如果定義flex-shrink : 0;當(dāng)空間不足時(shí)，元素仍會(huì)保持原有大小。