您的位置：首页 > 移动开发

CSS3新属性box-flex移动端利器

2017-01-14 11:43 513 查看

http://blog.csdn.net/ime33

未经允许，不得转载！

水平有限，不周之处欢迎指正、交流！

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：

<!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">
艺号出品

4000
</a>
</li>
<li class="cell">
<a class="component type3">
<img class="" src="icon1.png" width="36" height="36">
跳蚤集市
</a>
</li>
</ul>

</body>
</html>

定义ul为可伸缩盒子之后，li使用box-flex{1个单位}均分了ul的空间；去除一个li，剩下的li还是会均分ul空间的；看效果

当然了，百分比也是可以的均分百分比布局，在个数是2、4、5、10个的时候好均分，但是比如在6个时候16.666%，老感觉不舒服，这时候flex就突显优点了，使用最为广泛的应该是淘宝了，处处都能看见它的身影！

水平有限，欢迎指正、交流！

感谢阅读

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： box-flex box display flex ime33

相关文章推荐

新的分享

章节导航