建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了Flexbox瀏覽器兼容的知識點(diǎn)有哪些的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Flexbox瀏覽器兼容的知識點(diǎn)有哪些文章都會有所收獲，下面我們一起來看看吧。
10年的長島網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整長島建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“長島網(wǎng)站設(shè)計(jì)”,“長島網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
歷史
09年到現(xiàn)在flexbox分別經(jīng)歷了三種方式：display:box; 、display:flexbox 還有現(xiàn)在的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最初定義的時(shí)候其實(shí)2009年定義了第一個(gè)版本以后，就有瀏覽器廠商率先實(shí)現(xiàn)了display:box的功能。到了2011年大家對原來實(shí)現(xiàn)的功能還不滿意，為了不改變原來對display:box的支持，就有了display:flexbox;。到后來規(guī)范逐漸成熟再加上功能需要在加完善，所以就到了display:flex，還會不會改鬼知道呢。
支持情況
我們從caniuse上看一下支持度。
display:box; 除了Firefox其他的都partial support with prefix -webkit-
display:flexbox 支持也很好啊。
display:flex 發(fā)現(xiàn)差不多和上一個(gè)一樣的支持度。
大體總結(jié)了一下，除了Opera mobile12，還有IE，各大瀏覽器都是支持flexbox的舊版語法的。
注：最新的語法才加入了wrap的屬性，所以舊版肯定是不支持的
解決方案
從上面的調(diào)研可以看出，其實(shí)最新的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;
}
看到這里，你可能就有疑問，這樣每次寫這么多前綴不累嗎？我們有工具?。?/p>
我們可以使用類似autoprefixer, 或者是sass\less等工具來寫css。另外安利一個(gè)sass的mixin大家可以看看compass-flex。
還有一種方式就是，完全用老版本的display:box來寫，這樣的話 除了一些新特性比如flex-wrap不能用以外（如果你覺得沒必要用新特性）別的基本沒什么問題，這里貼一份朋友寫的grid系統(tǒng) （據(jù)說兼容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;
}
其他的不兼容特性
在舊版的規(guī)范中，使用比例伸縮布局時(shí)，子元素的內(nèi)容長短不同會導(dǎo)致無法“等分”，這個(gè)時(shí)候，我們需要給子元素設(shè)置一個(gè)“width:0%”來解決問題
不要給item設(shè)置“margin:auto”的屬性，在部分安卓機(jī)下，它會導(dǎo)致該元素的寬度撐開到100%占位
舊版的box item要求屬性是塊級結(jié)構(gòu)，所以很多inline元素需要設(shè)置display：block等才能顯示正常
text-overflow: ellipsis;在display：flex元素上無效
記住上面的坑，避免跳進(jìn)去。
關(guān)于“Flexbox瀏覽器兼容的知識點(diǎn)有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Flexbox瀏覽器兼容的知識點(diǎn)有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目：Flexbox瀏覽器兼容的知識點(diǎn)有哪些
URL網(wǎng)址：http://fisionsoft.com.cn/article/jghpsh.html
