flex布局踩坑记录

最近经常用到flex布局，记录一下遇到的问题

1. ellipsis没有效果

解决方法：需要在其父级元素上设置 width：0

2.图片明明设置了固定宽高，为何当页面过小时还是会被压缩变形

解决方法：给图片设置 flex-shrink: 0;

3.火狐浏览器设置flex: 1未生效

解决方法：在设置flex: 1的容器上设置 min-width: 0 或者 min-height: 0 。这里不一定是0，其他值也可

4.当高度（或宽度）过小时，子容器顶部（或左侧）会溢出

暂时没有解决方法，这里可以考虑不用flex布局

5.flex:1在ie浏览器的兼容问题

当父容器设置为 flex-direction: column 时，子容器设置 flex: 1 时高度会被压缩，导致内容不可见。这时，我们应该设置 flex: 0 1 auto【默认值】.

https://www.jianshu.com/p/0eceafe649a2

6.flex布局在IE下的糟糕表现

https://www.cnblogs.com/dodocie/p/7137314.html

7.flex布局对性能的影响

https://www.zhihu.com/question/271492607

 

// 更多...

综上：flex布局在IE上的兼容性还是不太乐观，so...如果对兼容性有要求，则flex布局不适合在PC端大量使用。

 

flex布局基础大家可以参考我以前写的一篇博文：快速了解移动端常用布局：flex布局