問題描述

順便問一下在蘋果上能兼容顯示正常嗎

問題解答

/ 子元素-平均分欄 /.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前綴生成，盡量做到最好。。