flexbox布局

最新推荐文章于 2024-06-13 15:47:11 发布

前端老码农

最新推荐文章于 2024-06-13 15:47:11 发布

阅读量123

点赞数

分类专栏：前端文章标签： flexbox布局

原文链接：https://www.mk2048.com/blog/blog.php?id=k0aaj20j&title=flexbox%E5%B8%83%E5%B1%80

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

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>