前端随笔：display -webkit-box和flex一些属性的对照关系

之前写的移动端的代码，好多使用了-webkit-box样式，现在要兼容PC端，尤其是在使用打包工具时，貌似-web-kit的不会自动转码呀，没办法，一个个和标准的flex方式对应修改一下才行：

display: flex; 　　　　　　display: -webkit-box
align-items: center; 　　 　　-webkit-box-align: center
justify-content:flex-start 　　-webkit-box-pack:start
justify-content: flex-end 　　-webkit-box-pack: end
justify-content:center 　　　　 -webkit-box-pack: center;

 

然后又发现了一个Edge的奇怪问题
flex:1

overflow-y:hidden

无效！！！！！！！！

flex:1的div照样会被里面的长内容撑开，并且由于overflow-y:hidden的原因，也没有滚动条，下面的就直接看不到了（flex:1里面的div实现了滚动条功能）。

查了好久发现 ，要在flex:1的div的每一个父级加上：

min-width:0;

min-height:0;

没原因，没原因，不知道为啥，加上就好了。看来IE（包括Edge）真的是一个神奇的浏览器。

 

转载于:https://www.cnblogs.com/wileywong/p/10321187.html