zoukankan html css js c++ java

display:flex 布局之骰子

代码部分

html

<body>
    <div class="box">
        <div class="a a1">
            <span class="b"></span>
        </div>
        <div class="a a2">
            <span class="b"></span>
            <span class="b"></span>
        </div>
        <div class="a a3">
            <span class="b b1"></span>
            <span class="b"></span>
            <span class="b b2"></span>
        </div>
        <div class="a a4">
            <div class="c" style="margin-top:20px;">
                    <span class="b"></span>
                    <span class="b"></span>
            </div>

            <div class="c" >
                    <span class="b"></span>
                    <span class="b"></span>
            </div>
        </div>
        <div class="a a5">
                <div class="c">
                        <span class="b"></span>
                        <span class="b"></span>
                </div>
                <div class="c" >
                        <span class="b"></span>
                </div>
                <div class="c" >
                        <span class="b"></span>
                        <span class="b"></span>
                </div>
        </div>
        <div class="a a6">
                <div class="c" style="margin:10px 0">
                        <span class="b"></span>
                        <span class="b"></span>
                        <span class="b"></span>
                </div>
                <div class="c" style="margin:25px 0">
                        <span class="b"></span>
                        <span class="b"></span>
                        <span class="b"></span>
                </div>
        </div>
    </div>
</body>

style

<style>
    .box{
        width:1300px;
        padding:100px 100px;
        display: flex;
        justify-content: space-between;
    }
    .a{
        width:150px;
        height: 150px;
        background: #999;
        border:1px solid #333;
        box-shadow:1px 1px 1px #333;
        border-radius: 10px;
        padding: 10px;
    }
    .a1{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .a2{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .a3{
        display: flex;
        justify-content: space-around;
        align-items: center;
      
    }
    .b1{
        align-self: flex-start;
    }
    .b2{
        align-self: flex-end;
    }
    .a4{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: inherit;

    }
    .b3{
        align-self: right;
    }
    .b4{
        align-self:center;
    }
    .b5{
        align-self:flex-end;
    }
    .b{
        width:40px;
        height: 40px;
        display:inline-block;
        border-radius: 50%;
        background: #000;
    }
    .c{
        width:100%;height:50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>

查看全文

相关阅读:
区间覆盖(线段树)
差分约束
 二维数组
 P1195 口袋的天空
 dp的刷表法和填表法
 P1284 三角形牧场
 数据库课程设计
 具体解释VB中连接access数据库的几种方法
 android之PackageManager简单介绍
 Oracle fga审计有这几个特性

原文地址：https://www.cnblogs.com/wong-do/p/9079264.html

display:flex 布局之 骰子

display:flex 布局之骰子