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

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">
                艺号出品
                </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就突显优点了,使用最为广泛的应该是淘宝了,处处都能看见它的身影!


水平有限,欢迎指正、交流!

感谢阅读

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值