flexbox布局

2018-06-24 01:58:38来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、flex兼容性

根据caniuse(http://caniuse.com/#search=flex),flex布局在IE6-9不支持。

因此,flex布局主要应用在移动端。

 

2、基础测试代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .item {
                /*flex布局*/
                display: flex;
            }
        </style>
    </head>

    <body>
        <div class="item">
            <div class="item-img">
                <img src="img/aaa.jpg" alt="" />
            </div>
            <div class="item-desc">
                <h3>说明</h3>
            </div>
        </div>

    </body>

</html>

效果:

 

说明:

将父元素设置为flex布局后,子元素也默认成了弹性元素,子元素并会自动沿主轴方向横向排列。

 

3、弹性布局轴

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .hb-shelf {
                /*flex布局*/
                display: flex;                
            }
            
            .item {
                width: 240px;
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <section class="hb-shelf">
            <article class="item">
                1
            </article>
            <article class="item">
                2
            </article>
            <article class="item">
                3
            </article>
            <article class="item">
                4
            </article>
        </section>

    </body>

</html>

 

给item设置宽度后,在浮动布局中,浏览器尽可能显示article的元素,直到填充满一整行才折行显示。

在flex布局中,flex-wrap: nowrap;值优先级高于article的宽度值width。当屏幕宽度小于960px时,保证所有的article等分扩展填充;当屏幕宽度大于960px时,右侧留空白。

效果:

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:导航栏链接点击后跳转,新页面相应的链接添加颜色

下一篇:下拉菜单