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 样式。