前言

我寫(xiě)頁(yè)面的時(shí)候用到過(guò)很多的flex布局，覺(jué)得非常好用。下面附上一篇不錯(cuò)的flex布局介紹的文章。

Flex 布局教程想了解的可以自己去看看這篇博文，或者自己百度，這里先部多做介紹，我們主要來(lái)說(shuō)一說(shuō)flex布局的兼容性問(wèn)題。

why?

大家可能想問(wèn)了，flex布局為什么會(huì)存在兼容性問(wèn)題?。?/p>

之所以存在兼容性問(wèn)題，是因?yàn)榧夹g(shù)在不斷的更新，有些舊的瀏覽器只支持舊語(yǔ)法的書(shū)寫(xiě)方式，所以就出現(xiàn)所謂的兼容性問(wèn)題。

what？

那么新舊版本是什么？

flex布局分為舊版本dispaly: box;，過(guò)渡版本dispaly: flex box;，以及現(xiàn)在的標(biāo)準(zhǔn)版本display: flex;。所以如果你只是寫(xiě)新版本的語(yǔ)法形式，是肯定存在兼容性問(wèn)題的。

Android

     2.3 開(kāi)始就支持舊版本 display:-webkit-box;

     4.4 開(kāi)始支持標(biāo)準(zhǔn)版本 display: flex;

IOS

     6.1 開(kāi)始支持舊版本 display:-webkit-box;

     7.1 開(kāi)始支持標(biāo)準(zhǔn)版本display: flex;

PC

ie10開(kāi)始支持，但是IE10的是-ms形式的。

下面是各個(gè)瀏覽器的支持情況

how？

所以我們?cè)撊绾芜M(jìn)行兼容性的寫(xiě)法呢？

盒子的兼容性寫(xiě)法

.box{
display: -webkit-box; /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本語(yǔ)法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本語(yǔ)法: IE 10 */
display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */
display: flex; /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
}

子元素的兼容性寫(xiě)法

.flex1 {
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

這種兼容寫(xiě)法不一定起效的。尤其是在底版本安卓系統(tǒng)中。因?yàn)槭裁茨?因?yàn)樗卸际窍蛳录嫒莸模詫?xiě)法的順序一定要寫(xiě)好了才起作用。就是把舊語(yǔ)法寫(xiě)在底下，個(gè)別不兼容的移動(dòng)設(shè)置才會(huì)識(shí)別，哪些是舊的語(yǔ)法，你懂的。那些帶box的一定要寫(xiě)在最下面即可。

所以上面的兼容寫(xiě)法應(yīng)該是這樣的才對(duì):

.box{
 display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */
display: flex; /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */