• 弹性盒布局实例


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

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

      关于弹性盒的一些基础我就不列举了,大家有需要可以去   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>

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

  • 相关阅读:
    centos7上以RPM方式安装MySQL5.6
    区别和详解:jQuery extend()和jQuery.fn.extend()
    jQuery笔记总结
    CSS Hack的一些知识
    12种不宜使用的javascript的语法
    64位Win7系统下vs2010调试无法连接oracle解决办法
    HashCode()与equals()深入理解
    Java ArrayList自动扩容机制
    Java基础知识
    MySQL的MVCC机制
  • 原文地址:https://www.cnblogs.com/suihang/p/9720570.html
Copyright © 2020-2023  润新知