zoukankan      html  css  js  c++  java
  • 有意思的flex 色子布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <style>
    *{
    padding:0;
    margin:0;
    }
    body{
    display:flex;
    justify-content: space-around;

    }
    [class*='div']{
    display: flex;
    100px;
    height:100px;
    border-radius:4px;
    border:1px solid red;
    padding:5px;
    }
    [class*='div'] p{
    15px;
    height:15px;
    border-radius: 50%;
    margin:2px;
    background-color: black;
    }
    .div1{
    justify-content: center;
    align-items: center;

    }
    .div2{
    align-items: center;
    justify-content: space-around;
    flex-direction:column;

    }
    .div3{
    justify-content: space-around;
    align-items: center;

    }
    .div3 p:nth-child(1){
    align-self: flex-start;
    }
    .div3 p:nth-child(3){
    align-self: flex-end;
    }
    .div4{
    justify-content: space-around;
    flex-direction: column;
    align-items: center;

    }
    .div4 div{
    display: flex;
    justify-content:space-around;
    100%;
    }
    .div4 div p{
    align-self: center;
    }
    .div5{
    justify-content: space-around;
    flex-direction:column;
    align-items: center;
    }
    .div5 div{
    display:flex;
    justify-content: space-around;
    100%;
    align-items: center;

    }
    .div5 div p{
    align-self: center;
    }

    .div6{
    justify-content: space-around;
    flex-direction:column;
    align-items: center;
    }
    .div6 div{
    display:flex;
    justify-content: space-around;
    100%;
    align-items: center;

    }
    .div6 div p{
    align-self: center;
    }
    .div8{
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    }
    .div8 div{
    display:flex;
    justify-content: space-between;
    100%;
    }
    .div8 div p{
    align-self: center;
    }

    </style>
    <body>
    <!--筛子布局-->
    <div class="div1">
    <p></p>
    </div>
    <div class="div2">
    <p></p>
    <p></p>

    </div>
    <div class="div3">
    <p></p>
    <p></p>
    <p></p>
    </div>
    <div class="div4">
    <div>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    </div>

    </div>
    <div class="div5">
    <div>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    </div>
    </div>
    <div class="div6">
    <div>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    </div>
    </div>
    <div class="div6">
    <div>
    <p></p>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    <p></p>
    </div>
    </div>
    <div class="div8">
    <div>
    <p></p>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    </div>
    <div>
    <p></p>
    <p></p>
    <p></p>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    HD1205吃糖果(鸽巢、抽屉原理)
    POJ3628 Bookshelf 2(01背包+dfs)
    poj1631Bridging signals(最长单调递增子序列 nlgn)
    【转】KMP算法
    Intern Day1
    记 MINIEYE C++应用开发实习生技术一面
    解决Mac下CLion无法编译运行多个cpp的问题
    记赛目科技C++开发工程师实习生技术面
    Git总结
    Docker学习大纲
  • 原文地址:https://www.cnblogs.com/yszr/p/9083175.html
Copyright © 2011-2022 走看看