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 慎用定位