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;当空间不足时,元素仍会保持原有大小。

推荐阅读更多精彩内容