很久不寫博文，之前的長時間不上都關閉了，但随着工作時間長越來越長，對知識的積累和總結還真的是很重要的。是以奉勸碼農們每天都還是要抽出來一點時間總結點東西，以後對你受益匪淺！！今天還是變談CSS3裡的flex怎麼處理相容的
flex是個非常好用的屬性，如果說有什麼可以完全代替 float 和 position ，那麼肯定是非它莫屬了，雖然現在低版本浏覽器不支援，可是對于移動來說相容性不是問題，可是在安卓4.3以後版本裡。那就不好用了，今天咱們就說下如果寫flex才能保證相容性。
flex之是以有相容性。是因為w3c從09到現在更新了很多次，是以有一些浏覽器隻是支援舊文法的書定方式，flex屬性有很多種，今天主要說常用的等比設定和居中這兩塊
一、舊文法
.box{
display: -moz-box; /*Firefox*/
display: -webkit-box; /*Safari,Opera,Chrome*/
display: box;
} 複制
2.容器屬性
1)box-pack box-pack屬性總共有4個值：
.box{ box-pack: start | end | center | justify;
/*主軸對齊：左對齊（預設） | 右對齊 | 居中對齊 | 左右對齊*/} 複制
3.子元素屬性
box-flex 屬性：
.item{
-moz-box-flex: 1.0; /*Firefox*/
-webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
box-flex: 1.0;} 複制
二、新文法
1.容器的display屬性
.item{
-moz-box-flex: 1; /*Firefox*/
-webkit-box-flex: 1; /*Safari,Opera,Chrome*/
box-flex: 1;
}
.box{ /*行内flex*/
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
} 複制
2.容器樣式
.box{ flex-direction: row | row-reverse | column | column-reverse; /*主軸方向：左到右（預設） | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse; /*換行：不換行（預設） | 換行 | 換行并第一行在下方*/
flex-flow: <flex-direction> || <flex-wrap>; /*主軸方向和換行簡寫*/
justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對齊方式：左對齊（預設） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對齊方式：頂部對齊（預設） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主軸對齊：頂部對齊（預設） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 上下平均分布*/} 複制
3.子元素屬性
.item{ order: <integer>; /*排序：數值越小，越排前，預設為0*/
flex-grow: <number>; /* default 0 */
/*放大：預設0（即如果有剩餘空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/
flex-shrink: <number>; /* default 1 */
/*縮小：預設1（如果空間不足則會縮小，值為0不縮小）*/
flex-basis: <length> | auto; /* default auto */
/*固定大小：預設為0，可以設定px值，也可以設定百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto，*/
align-self: auto | flex-start | flex-end | center | baseline | stretch; /*單獨對齊方式：自動（預設） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/} 複制
相容寫法：
1.盒子的相容寫法
.box{
display: -webkit-box; /* 老版本文法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本文法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本文法: IE 10 */
display: -webkit-flex; /* 新版本文法: Chrome 21+ */
display: flex; /* 新版本文法: Opera 12.1, Firefox 22+ */} 複制
2.子元素的相容寫法：
.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+ */
} 複制
我要說的主要部分來了。。
這種相容寫法不一定起效的。尤其是在底版本安卓系統中。因為什麼呢?因為所有都是向下相容的，是以寫法的順序一定要寫好了才起作用。就是把舊文法寫在底下，個别不相容的移動設定才會識别，哪些是舊的文法，你懂的。那些帶box的一定要寫在最下面即可。是以上面的相容寫法應該是這樣的才對
.box{
display: -webkit-flex; /* 新版本文法: Chrome 21+ */
display: flex; /* 新版本文法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本文法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本文法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本文法: IE 10 */
} 複制
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
} 複制
如果你不把握好這個先後順序，總是調整不出來完整的相容樣式。