Flexbox瀏覽器兼容的知識點有哪些

這篇文章主要介紹了Flexbox瀏覽器兼容的知識點有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Flexbox瀏覽器兼容的知識點有哪些文章都會有所收獲，下面我們一起來看看吧。

歷史

09年到現在flexbox分別經歷了三種方式：display:box; 、display:flexbox 還有現在的display:flex;

If you Google around about Flexbox, you will find lots of outdated information. Here’s how you can quickly tell:

If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification.

flexbox最初定義的時候其實2009年定義了第一個版本以后，就有瀏覽器廠商率先實現了display:box的功能。到了2011年大家對原來實現的功能還不滿意，為了不改變原來對display:box的支持，就有了display:flexbox;。到后來規范逐漸成熟再加上功能需要在加完善，所以就到了display:flex，還會不會改鬼知道呢。

支持情況

我們從caniuse上看一下支持度。

display:box; 除了Firefox其他的都partial support with prefix -webkit-

display:flexbox 支持也很好啊。

display:flex 發現差不多和上一個一樣的支持度。

大體總結了一下，除了Opera mobile12，還有IE，各大瀏覽器都是支持flexbox的舊版語法的。

注：最新的語法才加入了wrap的屬性，所以舊版肯定是不支持的

解決方案

從上面的調研可以看出，其實最新的flex是兼容之前的語法的，只不過有一些新增的語法。那么解決這樣的兼容問題顯而易見的就是增加上舊版的語法，就可以解決一些支持舊版語法的瀏覽器啦。

flexbox分為container和item，所以兼容的寫法也分兩部分。

container

.grid{

  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

}

item

.grid-cell{

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    flex: 1;

}

看到這里，你可能就有疑問，這樣每次寫這么多前綴不累嗎？我們有工具啊：

我們可以使用類似autoprefixer, 或者是sass\less等工具來寫css。另外安利一個sass的mixin大家可以看看compass-flex。

還有一種方式就是，完全用老版本的display:box來寫，這樣的話 除了一些新特性比如flex-wrap不能用以外（如果你覺得沒必要用新特性）別的基本沒什么問題，這里貼一份朋友寫的grid系統 （據說兼容Android2.3）:

.row {

    width: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    height: auto;

    display: block;

    zoom: 1;

}

.row.flex:after {

    display: none;

}

.row.flex > .col-flex,

.row.flex > .col,

.row.flex > .col-1,

.row.flex > .col-2,

.row.flex > .col-3,

.row.flex > .col-4,

.row.flex > .col-5,

.row.flex > .col-6,

.row.flex > .col-7,

.row.flex > .col-8,

.row.flex > .col-9,

.row.flex > .col-10,

.row.flex > .col-11,

.row.flex > .col-12 {

    float: none;

}

.row.flex > .col-flex {

    -webkit-box-flex: 1;

}

.row:after {

    content: " ";

    visibility: hidden;

    display: table;

    height: 0;

    clear: both;

}

.row > .col,

.row > .col-1,

.row > .col-2,

.row > .col-3,

.row > .col-4,

.row > .col-5,

.row > .col-6,

.row > .col-7,

.row > .col-8,

.row > .col-9,

.row > .col-10,

.row > .col-11,

.row > .col-12 {

    -webkit-box-flex: 0;

    padding-left: 0;

    padding-right: 0;

    display: block;

    float: left;

}

.row > .col-1 {

    width: 8.33333%;

}

.row > .col-offset-1 {

    margin-left: 8.33333%;

}

.row > .col-2 {

    width: 16.66667%;

}

.row > .col-offset-2 {

    margin-left: 16.66667%;

}

.row > .col-3 {

    width: 25%;

}

.row > .col-offset-3 {

    margin-left: 25%;

}

.row > .col-4 {

    width: 33.33333%;

}

.row > .col-offset-4 {

    margin-left: 33.33333%;

}

.row > .col-5 {

    width: 41.66667%;

}

.row > .col-offset-5 {

    margin-left: 41.66667%;

}

.row > .col-6 {

    width: 50%;

}

.row > .col-offset-6 {

    margin-left: 50%;

}

.row > .col-7 {

    width: 58.33333%;

}

.row > .col-offset-7 {

    margin-left: 58.33333%;

}

.row > .col-8 {

    width: 66.66667%;

}

.row > .col-offset-8 {

    margin-left: 66.66667%;

}

.row > .col-9 {

    width: 75%;

}

.row > .col-offset-9 {

    margin-left: 75%;

}

.row > .col-10 {

    width: 83.33333%;

}

.row > .col-offset-10 {

    margin-left: 83.33333%;

}

.row > .col-11 {

    width: 91.66667%;

}

.row > .col-offset-11 {

    margin-left: 91.66667%;

}

.row > .col-12 {

    width: 100%;

}

.row > .col-offset-12 {

    margin-left: 100%;

}

.flex {

    display: -webkit-box;

    display: box;

    -webkit-box-orient: horizontal;

    box-orient: horizontal;

}

.flex.vertical {

    -webkit-box-orient: vertical;

    box-orient: vertical;

}

.flex.start {

    -webkit-box-pack: start;

}

.flex.center {

    -webkit-box-pack: center;

}

.flex.end {

    -webkit-box-pack: end;

}

.flex.justify {

    -webkit-box-pack: justify;

}

.flex.top {

    -webkit-box-align: start;

}

.flex.middle {

    -webkit-box-align: center;

}

.flex.bottom {

    -webkit-box-align: end;

}

其他的不兼容特性

在舊版的規范中，使用比例伸縮布局時，子元素的內容長短不同會導致無法“等分”，這個時候，我們需要給子元素設置一個“width:0%”來解決問題

不要給item設置“margin:auto”的屬性，在部分安卓機下，它會導致該元素的寬度撐開到100%占位

舊版的box item要求屬性是塊級結構，所以很多inline元素需要設置display：block等才能顯示正常

text-overflow: ellipsis;在display：flex元素上無效

記住上面的坑，避免跳進去。

關于“Flexbox瀏覽器兼容的知識點有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Flexbox瀏覽器兼容的知識點有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。