欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

弹性盒布局实例

程序员文章站 2022-03-26 14:29:22
今天给大家搞一个弹性盒布局的实例，最近一直在复习一些基础的东西，所以一直会跟大家分享一些基础的东西 说实话，最近感觉被掏空了，别问我为什么，谁去保健谁知道，哈哈，注意安全，好了步入正题，今天用弹性盒写了一个小例子， 关于弹性盒的一些基础我就不列举了，大家有需要可以去 http://www.ruany ......

　　今天给大家搞一个弹性盒布局的实例，最近一直在复习一些基础的东西，所以一直会跟大家分享一些基础的东西

　　说实话，最近感觉被掏空了，别问我为什么，谁去保健谁知道，哈哈，注意安全，好了步入正题，今天用弹性盒写了一个小例子，

　　关于弹性盒的一些基础我就不列举了，大家有需要可以去   http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html    阮一峰大佬的网站去看看

　　他已经写的非常详细了，好，那我们来直接举栗

　　弹性盒布局实例

　　老规矩，我还是把代码扔上来，大家可以自己拉下去玩一下

　　

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        *{margin: 0;padding: 0}
        /* box的样式 */
        .box{
            height: 300px;
            width: 100%;
            background: oldlace;
            margin: 150px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        /* box下div的样式 */
        .box>div{
            width: 130px;
            height: 130px;
            background-color: black;
            display: flex;
            padding: 20px;
        }
        /* span的样式 */
        span{
            height: 25px;
            width: 25px;
            background-color: white;
            border-radius: 50%;
        }
        /*写筛子*/

        /* 第一个筛子面 */
        .a1{
            /* 控制主轴的排列 */
            justify-content: center;
            /* 控制副轴的排列 */
            align-items: center;
        }

        /* 第二个筛子面 */
        .a2{
            /* 将主轴改变为列 */
            flex-direction: column;

            justify-content: space-around;
            align-items: center
        }
        /* 第三个筛子面 */
        .a3{
            justify-content: space-between;
        }
        .a3>span:nth-of-type(2){
            align-self: center;
        }
        .a3>span:nth-of-type(3){
            align-self: flex-end;
        }
        /* 第四个筛子面 */
        .a4{
            justify-content: space-around;
        }
        .a4>div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        /* 第五个筛子面 */
        .a5{
            justify-content: space-around;
        }
        .a5>div{
            display: flex;
            flex-direction: column;
            justify-content:space-around;
        }

        /*第六个筛子面*/
        .a6{
            justify-content: space-around;
        }
        .a6>div{
            display:flex;
            flex-direction: column;
            justify-content: space-around;
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- 第一个div -->
        <div class="a1"><span></span></div>
        <!-- 第二个div -->
        <div class="a2"><span></span><span></span></div>
        <!-- 第三个div -->
        <div class="a3"><span></span><span></span><span></span></div>
        <!-- 第四个div -->
        <div class="a4">
                <div><span></span><span></span></div>
                <div><span></span><span></span></div>
           </div>
        <!-- 第五个div -->
        <div class="a5">
                <div><span></span><span></span></div>
                <div><span></span></div>
                <div><span></span><span></span></div>
        </div>
        <!-- 第六个div -->
        <div class="a6">
                <div><span></span><span></span><span></span></div>
                <div><span></span><span></span><span></span></div>
        </div>
    </div>
</body>
</html>

       哇，这木长的代码，你竟然能看到这里，太感动了，抓紧联系我好吧，我带你保健去

上一篇： 使用rem编写自适应屏幕网页造成div被span撑高的解决办法

下一篇： 第六天 - 字典

推荐阅读