打赏

flexbox布局

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时，右侧留空白。

效果：

 

posted @ 2017-10-24 16:45  孟繁贵  阅读(305)  评论(0)  编辑  收藏  举报
TOP