flex已知bug

根据微小的项目经验目前发现 flex 布局的以下 bug。当然 flex 布局兼容 ie9 以上。有很属性都需要兼容写法，建议使用 autoprefixer 插件自动补齐兼容写法。

块级元素

flex的子元素为非块级元素时，flex布局在ie10以下和一些国产浏览器中无效。

解决方式为设定每个子元素都为display:block。

文字溢出

在使用flex布局的元素text-overflow: ellipsis;是无效的。

.box {
  display:flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

复制代码

文字溢出省略号显示是无效的

解决方法为套一个元素。

内容超出

下面是一个普遍的布局。

父级为flex布局有固定宽度，图片写死宽度，其余部分使用 flex:1占据剩余空间字体超出隐藏。这样可能会遇见文字超出隐藏无效，图片会被文字挤压的很小。

其实这并不是一个bug, 这是我在理解flex时出现了偏差.右边的文字虽然设置了宽度,但是并未设置超出隐藏.所以它被内容挤压从而形成这种情况.不知道为什么我就认为设置flex:1的元素天然具有overflow: hidden;的属性.显然这是一个错误的认知. 解决办法是给文字元素overflow: hidden属性即可.

高宽继承问题

当父元素设置flex,子元素设置flex:1孙元素设置height:100%或width:100%时会发现无效.这个问题主要出现在老版本的国产浏览器上.这个问题的本质还是flex布局的元素在高宽度继承上有bug.

你可以参考这篇文章.解决高度不能继承的问题.宽度继承问题目前只是听人说起不曾遇到过.

定位问题

在某些国产浏览器中会出现子元素绝对定位中心点偏移的问题。

这一点现在还没有好的解决办法，目前在 flex 慎用定位