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- /
寬度: 20%; / 對於舊語法，否則會崩潰。 -webkit-flex: 1; /
Chrome / -ms-flex: 1; /
IE 10 / flex: 1;新，規格- Opera 12.1，Firefox 20+
/}/
父元素- 水平排列（首頁）
/.flex-h { 顯示: box; /
舊版- Android 4.4-
/ 顯示：-webkit-box; /舊版- iOS 6-、Safari 3.1-6
/ 顯示：- moz-box; 舊- Firefox 19-（有問題，但大部分有效）
/ 顯示：-ms-flexbox; / TWEENER - IE 10
/ 顯示： -webkit -flex; / 新- Chrome
/ 顯示：flex / 新，規格- Opera 12.1、Firefox 20+
/ / 第09 版/
-webkit-box-orient: 水平; / 第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: 換行; -moz-flex-wrap: 換行; -ms-flex-wrap: 換行;
- o -flex-wrap:wrap;
flex-wrap:wrap;
}
/
父元素-水平停留（主車輛為水平方向）
/
.flex- hc { / 第09 版
/
-webkit-box-pack: center; / 第12 版
/
-webkit-justify-content :中心; -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; // display: flex; /
NEW, Spec - Opera 12.1, Firefox 20+ / /
09版/ /
09版
/ box-orient: vertical; /
12版
/
-webkit-flex-direction: column;
-moz-flex-direction: column; -o-flex-direction: column;
flex-direction: column;
}/父元素-縱向換行
/
/父元素-縱向換行/
/. flex-vw { /
09版/ /
-webkit-box-lines: multiple;
/
/
12版
/
/
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

網路應用程式

Answer 3

行動端相容跟手機系統版本有很大關係。因為應用內嵌網頁用的一般都是系統自帶的瀏覽核心。你不說個具體版本還真不好判斷。一般情況下iOS的相容比安卓好，效能也高

Answer 4

蘋果支援的ok，安卓的話根據系統的不同有很大差別。尤其是微信安卓版的自帶的瀏覽器，之前它核心不支援flexbox，現在據說更新了，不過還沒嘗試過。
總的來說，應該先考慮你的目標用戶群，從諸如年齡、消費水平、心理等方面入手，知道在他們中Android和iOS的用戶大致佔多少（以及不同安卓手機的大概比重）以後，才便於選擇技術。調查以後如果發現只有少數用戶的手機不支援flexbox的話，就可以放心的在一定程度上使用它嘍。
by the way，不管怎樣還是建議在某種程度上做下相容性處理的

Answer 5

http://pleeease.io/play/

這個網站css3前綴生成，盡量做到最好。 。