flex兼容性问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex兼容性问题相关的知识,希望对你有一定的参考价值。
flex于众多手机的兼容方案
- 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南](https://github.com/postcss/autoprefixer)
- 纯手写css兼容代码
/*display: flex;写法*/ span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /*justify-content: center*/ span { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*align-items: center*/ span { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*flex: 1*/ span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; width: 0%; }
注意:添加前缀并不是万能的,其原因是不能用行内元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:0%; 且不能使用margin:0 auto;
以上是关于flex兼容性问题的主要内容,如果未能解决你的问题,请参考以下文章