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

Question

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

Answer 1

/ Child element-average distribution /
.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+ /
}
/ Father element - horizontal arrangement (main page) /
.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+ /
/ 09th edition /
-webkit-box-orient: horizontal;
/ 12th edition /
-webkit-flex-direction: row;
-moz-flex-direction : row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/ Father element - Horizontal line /
.flex-hw {
/ 09th edition /
/-webkit-box-lines: multiple;/
/ 12th edition /
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
- o-flex-wrap: wrap;
flex-wrap: wrap;
}
/ Father element - horizontal stay (main vehicle is horizontal direction) /
.flex- hc {
/ 09th edition /
-webkit-box-pack: center;
/ 12th edition /
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* Get it:

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

*/
}
/ Parent element - vertical arrangement (main axis) /
.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+ /
/ Version 09/
-webkit- box-orient: vertical;
/ version 12/
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex -direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/ Parent element - vertical line wrapping /
. flex-vw {
/ Version 09/
/-webkit-box-lines: multiple;/
/ Version 12/
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/ Parent element - vertical centering (only effective when the main axis is horizontal) /
.flex-vc {
/ Version 09/
-webkit-box-align: center;
/ Version 12/
-webkit-align-items: center;
-moz-align -items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
/ sub Element - displayed at the 1st position from left to right (top to bottom), used to change the source document order display /
.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+ /
}
/ child element - displayed in the 2nd position from left to right (top to bottom), used for Change the order of source documents to display /
.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

Mobile compatibility has a lot to do with the mobile phone system version. Because web pages embedded in applications generally use the system's own browsing kernel. It's really hard to judge if you don't tell me a specific version. Generally speaking, iOS is more compatible than Android and has higher performance

Answer 4

It’s OK if Apple supports it, but if it’s Android, it varies greatly depending on the system. Especially the browser that comes with the WeChat Android version. Before, its kernel did not support flexbox. Now it is said that it has been updated, but I haven’t tried it yet.
In general, you should first consider your target user group, starting from aspects such as age, consumption level, psychology, etc., and know the approximate proportion of Android and iOS users among them (as well as the approximate proportion of different Android phones) Later, it will be easier to choose technology. After investigation, if you find that only a small number of users' mobile phones do not support flexbox, you can safely use it to a certain extent.
by the way, anyway it is recommended to handle compatibility to a certain extent

Answer 5

http://pleeease.io/play/

The css3 prefix of this website is generated, try to do the best. .