CSS3新屬性box-flex移動端利器
阿新 • • 發佈：2019-01-05
水平有限，不周之處歡迎指正、交流！
box-flex{value}屬性規定框的子元素是否可伸縮其尺寸。可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多餘的空間，可伸縮元素就會擴充套件來填充這些空間。
相容性：
目前沒有瀏覽器支援 box-flex 屬性。
Firefox 支援替代的 -moz-box-flex 屬性。
Safari、Opera 以及 Chrome 支援替代的 -webkit-box-flex 屬性。
移動端中手機使用的四大瀏覽器核心：
1.Trident:因為在早期IE佔有大量的市場份額，所以以前有很多網頁是根據這個Trident的標準來編寫的，但是實際上這個核心對真正的網頁標準支援不是很好，同時存在許多安全Bug。
2.Gecko:優點就是功能強大、豐富，可以支援很多複雜網頁效果和瀏覽器擴充套件介面，缺點是消耗很多的資源，比如記憶體。
3.Webkit:優點就是Webkit擁有清晰的原始碼結構、極快的渲染速度，缺點是對網頁程式碼的相容性較低，會使一些編寫不標準的網頁無法正確顯示。
4.Presto：Presto核心被稱為公認的瀏覽網頁速度最快的核心，同時也是處理JS指令碼最相容的核心，能在Windows、Mac及Linux作業系統下完美執行。
目前最為廣泛的核心使用時webkit核心，所以這個響噹噹的CSS3屬性使用起來妥妥的！效果圖：
demo：
定義ul為可伸縮盒子之後，li使用box-flex{1個單位}均分了ul的空間；去除一個li，剩下的li還是會均分ul空間的；看效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>http://blog.csdn.net/ime33 flex例項</title> <meta charset="utf-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no, address=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="TMALL"> <link href="" rel="shortcut icon" type="image/x-icon"> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 16px; font-family: 微軟雅黑; } ul,li{ list-style: none; } img { border: 0; vertical-align: middle; } .mui-flex { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex!important; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cell { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; display: block; padding: 0!important; position: relative; } .component { background-color: #fff; background-clip: content-box; overflow: hidden; display: block; } a.component.type3 { display: block; color: #999999; font-size: 12px; line-height: normal; height: auto; text-align: center; margin: 12px 4px; } a.component.type3 img { display: block; margin: 0 auto 5px; } </style> </head> <body> <ul class="mui-flex"> <li class="cell"> <a class="component type3"> <img class="" src="icon1.png" width="36" height="36"> 設計書籍 </a> </li> <li class="cell"> <a class="component type3"> <img class="" src="icon1.png" width="36" height="36"> 視訊教學 </a> </li> <li class="cell"> <a class="component type3"> <img class="" src="icon1.png" width="36" height="36"> 繪圖工具 </a> </li> <li class="cell"> <a class="component type3"> <img class="" src="icon1.png" width="36" height="36"> 藝號出品 </a> </li> <li class="cell"> <a class="component type3"> <img class="" src="icon1.png" width="36" height="36"> 跳蚤集市 </a> </li> </ul> </body> </html>
當然了，百分比也是可以的均分百分比佈局，在個數是2、4、5、10個的時候好均分，但是比如在6個時候16.666%，老感覺不舒服，這時候flex就突顯優點了，使用最為廣泛的應該是淘寶了，處處都能看見它的身影！
水平有限，歡迎指正、交流！
感謝閱讀