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

Question

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

Answer 1

/ 子元素-平均分栏 /
.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+ /
}

Answer 2

webapp

Answer 3

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

Answer 4

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

Answer 5

http://pleeease.io/play/

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