css3 - 公司要做一个手机app应用内嵌的网页，问下如果是在安卓机上显示得话，flexbox是否能兼容

问题描述

顺便问一下在苹果上能兼容显示正常吗

问题解答

/ 子元素-平均分栏 /.flex1 { -webkit-box-flex: 1; / OLD - iOS 6-, Safari 3.1-6 / -moz-box-flex: 1; / OLD - Firefox 19- / width: 20%; / For old syntax, otherwise collapses. / -webkit-flex: 1; / Chrome / -ms-flex: 1; / IE 10 / flex: 1; / NEW, Spec - Opera 12.1, Firefox 20+ /}/ 父元素-横向排列（主轴） /.flex-h { display: box; / OLD - Android 4.4- / display: -webkit-box; / OLD - iOS 6-, Safari 3.1-6 / display: -moz-box; / OLD - Firefox 19- (buggy but mostly works) / display: -ms-flexbox; / TWEENER - IE 10 / display: -webkit-flex; / NEW - Chrome / display: flex; / NEW, Spec - Opera 12.1, Firefox 20+ / / 09版 / -webkit-box-orient: horizontal; / 12版 / -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;}/ 父元素-横向换行 /.flex-hw { / 09版 / /-webkit-box-lines: multiple;/ / 12版 / -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;}/ 父元素-水平居中（主轴是横向才生效） /.flex-hc { / 09版 / -webkit-box-pack: center; / 12版 / -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; /* 其它取值如下：

align-items 主轴原点方向对齐flex-end主轴延伸方向对齐space-between 等间距排列，首尾不留白space-around 等间距排列，首尾留白

*/}/ 父元素-纵向排列（主轴） /.flex-v { display: box; / OLD - Android 4.4- / display: -webkit-box; / OLD - iOS 6-, Safari 3.1-6 / display: -moz-box; / OLD - Firefox 19- (buggy but mostly works) / display: -ms-flexbox; / TWEENER - IE 10 / display: -webkit-flex; / NEW - Chrome / display: flex; / NEW, Spec - Opera 12.1, Firefox 20+ / / 09版 / -webkit-box-orient: vertical; / 12版 / -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;}/ 父元素-纵向换行 /.flex-vw { / 09版 / /-webkit-box-lines: multiple;/ / 12版 / -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;}/ 父元素-竖直居中（主轴是横向才生效） /.flex-vc { / 09版 / -webkit-box-align: center; / 12版 / -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;}/ 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 /.flex-1 { -webkit-box-ordinal-group: 1; / OLD - iOS 6-, Safari 3.1-6 / -moz-box-ordinal-group: 1; / OLD - Firefox 19- / -ms-flex-order: 1; / TWEENER - IE 10 / -webkit-order: 1; / NEW - Chrome / order: 1; / NEW, Spec - Opera 12.1, Firefox 20+ /}/ 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 /.flex-2 { -webkit-box-ordinal-group: 2; / OLD - iOS 6-, Safari 3.1-6 / -moz-box-ordinal-group: 2; / OLD - Firefox 19- / -ms-flex-order: 2; / TWEENER - IE 10 / -webkit-order: 2; / NEW - Chrome / order: 2; / NEW, Spec - Opera 12.1, Firefox 20+ /}

webapp

移动端兼容跟手机系统版本有很大关系。因为应用内嵌网页用的一般都是系统自带的浏览内核。你不说个具体版本还真不好判断。一般情况下iOS的兼容比安卓好，性能也高

苹果支持的ok，安卓的话根据系统的不同有很大差别。尤其是微信安卓版的自带的浏览器，之前它内核不支持flexbox，现在据说更新了，不过还没尝试。总的来说，应该先考虑你的目标用户群体，从诸如年龄、消费水平、心理等方面入手，知道在他们中Android和iOS的用户大致占多少（以及不同安卓手机的大概比重）以后，才便于选择技术。调查以后如果发现只有很少一部分用户的手机不支持flexbox的话，就可以放心的在一定程度上使用它喽。by the way，不管怎样还是建议在一定程度上做下兼容性处理的

http://pleeease.io/play/

这个网站css3前缀生成，尽量做到最好。。