問題描述

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

問題解答

/ 子元素-平均分欄 /.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 主軸原點(diǎn)方向?qū)Rflex-end主軸延伸方向?qū)Rspace-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個(gè)位置，用于改變?cè)次臋n順序顯示 /.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個(gè)位置，用于改變?cè)次臋n順序顯示 /.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

移動(dòng)端兼容跟手機(jī)系統(tǒng)版本有很大關(guān)系。因?yàn)閼?yīng)用內(nèi)嵌網(wǎng)頁(yè)用的一般都是系統(tǒng)自帶的瀏覽內(nèi)核。你不說(shuō)個(gè)具體版本還真不好判斷。一般情況下iOS的兼容比安卓好，性能也高

蘋果支持的ok，安卓的話根據(jù)系統(tǒng)的不同有很大差別。尤其是微信安卓版的自帶的瀏覽器，之前它內(nèi)核不支持flexbox，現(xiàn)在據(jù)說(shuō)更新了，不過(guò)還沒嘗試。總的來(lái)說(shuō)，應(yīng)該先考慮你的目標(biāo)用戶群體，從諸如年齡、消費(fèi)水平、心理等方面入手，知道在他們中Android和iOS的用戶大致占多少（以及不同安卓手機(jī)的大概比重）以后，才便于選擇技術(shù)。調(diào)查以后如果發(fā)現(xiàn)只有很少一部分用戶的手機(jī)不支持flexbox的話，就可以放心的在一定程度上使用它嘍。by the way，不管怎樣還是建議在一定程度上做下兼容性處理的

http://pleeease.io/play/

這個(gè)網(wǎng)站css3前綴生成，盡量做到最好。。