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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文主要讲述页面布局样式方面涉及的知识点,更全面的对CSS相应的技术进行归类、整理、说明,没有特别详细的技术要点说...
    Joel_zh阅读 998评论 0 1
  • 一、两个重要的概念: 1. flex container:开启了flex布局的元素 2.flex items:fl...
    TQ啊阅读 1,364评论 0 1
  • Flex 布局 简介 flex 布局 (Flexible 布局,弹性盒子)是在小程序开发经常使用的布局方式 官方文...
    小孤语阅读 376评论 0 0
  • Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline...
    白雪公主960阅读 819评论 1 1
  • React Native是通过 yoga[https://github.com/facebook/yoga] 作为...
    KingAmo阅读 846评论 0 0