记flex布局坑(包括IE11中)

IE11中

flex:1不生效

ie11中的flex-grow默认0,也就是flex:1 = flex:1 1 0。谷歌内核浏览器为xflex:1。 所以:
flex:1 改为 flex: 1 1 auto

min-height不生效

1、min-height外的父div需要设置成display:flex
2、此时min-height的div可能宽度会变小,需要设置width:100%
3、min-height如果时flex-column布局,min-height内部的子div如果设置了flex:1,会出现没有被内部元素撑开的情况,因此相应的子div需要设置 flex-shrink: 1

总结

flex:1 改为 flex: 1 1 auto
min-height的父div设置成display:flex,min-height元素设置width:100%
撑不开的子元素设置 flex-shrink: 1

通用flex

设置文字省略号显示,父元素flex布局被撑开

父元素 flex 布局,子元素有一行文字,将其设置为不换行隐藏后显示省略号,但实际并不是想象的那样,而导致布局变形。
这种情况是因为 flex 布局特性,子内容优先被内容撑开使得文字不隐藏。
解决:将该父元素的宽度设置为 0 ,并使用 flex:1 样式。

推荐阅读更多精彩内容