Flex布局踩过的坑

对于Flex布局，之前已经做过一些说明，其功能非常强大好用，但因为版本问题，与浏览器兼容方面还需要做一些处理，现在和你们谈谈我使用时所踩过的常见的坑。
1.兼容性的坑
一般我们用flex布局经常开发一些手机端的页面，但是手机端也分为安卓以及IOS系统，这两大系统对flex的兼容还是有所差别的，flex布局从09年开始到现在已经有5个版本，所以如果要写兼容语法的话，最少要写两种方式，不仅减慢了开发速率，而且还不一定准，毕竟要记那么多语法，很容易造成混乱，所以建议使用gulp 编写SASS来管理自己的css 。
http://www.jianshu.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;当空间不足时，元素仍会保持原有大小。