前端随笔: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)真的是一个神奇的浏览器。
 
posted @ 2019-01-25 18:45  WileyWong  阅读(2949)  评论(0编辑  收藏  举报