網頁設計flex布局瀏覽器兼容解決方案
雖然flex布局早在2009年就有了，而現在是2015年8月10日，使用最新的flex語法會發現支持程度并不好，即使是在“高端”瀏覽器上也是如此，比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同
網上現有的代碼中充斥著各種版本，在Chrome下運行一般都沒有問題，Firefox一般也還好，但Android與IOS Safari下就顯得非常無力了。之所以會出現這樣的局面，主要是歷史原因，從2009年到2015年，期間W3C規范有了多次更新，瀏覽器支持程度也就有了差異。
Flexbox布局的語法經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多。
Flexbox布局主要有三種語法版本：
2009版本，我們稱之為老版本，使用的是“display:box”或者“display:inline-box”;
2011版本，我們稱之為混合版本，使用的是“display:flexbox”或者“display:inline-flexbox”;
2013版本，也就是最新語法版本，使用的是“display:flex”或者“display:inline-flex”。
我們需要把Flexbox舊的語法、中間過渡語法和最新的語法混在一起使用，在這里他們的順序顯得非常重要。“display”屬性本身并不添加任何瀏覽器前綴，我們需要確保我們老語法不要覆蓋新語法讓瀏覽器(可能總是會)同時支持。
IE10部分支持2012，需要-ms-前綴
Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前綴
Safari7/7.1/8部分支持2012， 需要-webkit-前綴
IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前綴
建議在需要兼容Android時(2009版語法)采用flex-h/flex-v聲明容器使用flex模式，在不需要兼容Android時(2012版語法)使用flex設置容器
lex布局非常適宜當前的移動設備和大屏幕瀏覽器網頁開發非常的便捷，是未來網頁開發布局設計的方向，是一個未來技術。flex布局能夠編寫代碼小，各種寬度、高度、位置都由瀏覽器自身按照既定規則完成適配，跨平臺無障礙閱讀體驗。
css3 flex特點
一旦一個容器賦予了display:flex屬性，將會有以下特點：
項目無法設置浮動。
列表的樣式會被清除。
無法使用vertical-align設置垂直對齊方式。
| << 上一篇：自己學習網站制作的步驟有哪些 | >> 下一篇：網頁設計中flex布局垂直水平居中 |
- 2017-11-21室內效果圖vray渲染常見問題解決方案
- 2017-10-27網頁設計為什么在不同電腦顯示不一樣
- 2017-10-23室內效果圖中的常見問題及解決方案
- 2017-09-01網頁設計博客類的靈感源于借鑒
- 2017-09-01網頁設計師的靈感主要從哪里來
- 2017-08-11室內裝修設計中如何合理布局家具
- 2017-07-26毛坯房裝修水電改造布局注意事項
- 2017-07-11網頁設計移動端H5前端性能優化方案
- 2017-07-11h5移動端頁面怎么根據設計稿布局
- 2017-06-26怎么把網頁設計的更有視覺效果
- 2017-06-22網頁設計中的樣式單位px、em、rem區別
- 2017-05-24室內設計平面布局方案和技巧
- 2017-05-09網頁設計中圖片有哪些常見的使用技巧
- 2017-05-04鄭州哪里可以學網頁設計培訓班
- 2017-05-04自適應網頁設計制作的方法和技巧
- 求學問答專業答復，快速響應
- 電話：0371-63218905
- 手機：13613841515
-
QQ：
