flex布局实现骰子

96
吕周坤
2017.05.19 21:36* 字数 54

学习flex布局后的实例布局--骰子
具体实现原理可参考阮一峰的Flex 布局教程:实例篇和博客flex布局实现色子
效果图:

骰子.png

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex布局实例--骰子</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #000;
            display: flex;
            flex-wrap: wrap;
        }
        .box{
            width: 100px;
            height: 100px;
            background: #fff;
            border-radius: 20px;
            margin: 100px;
            padding: 15px;
        }
        .item{
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 30px;
        }
    </style>
    <style type="text/css">
        .box1{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item1{}
    </style>
    <style type="text/css">
        .box2{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        .item2{}
    </style>
    <style type="text/css">
        .box3{
            display: flex;
        }
        .item3:nth-child(2){
            align-self: center;
        }
        .item3:nth-child(3){
            align-self: flex-end;
        }
    </style>
    <style type="text/css">
        .box4{
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .column4{
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }
    </style>
    <style type="text/css">
        .box5{
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .column5{
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }
        .column5:nth-child(2){
            justify-content: center;
        }
    </style>
    <style type="text/css">
        .box6{
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .column6{
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <!-- 1 -->
    <div class="box box1">
        <span class="item item1"></span>
    </div>
    <!-- 2 -->
    <div class="box box2">
        <span class="item item2"></span>
        <span class="item item2"></span>
    </div>
    <!-- 3 -->
    <div class="box box3">
        <span class="item item3"></span>
        <span class="item item3"></span>
        <span class="item item3"></span>
    </div>
    <!-- 4 -->
    <div class="box box4">
        <div class="column4">           
            <span class="item item4"></span>
            <span class="item item4"></span>
        </div>  
        <div class="column4">           
            <span class="item item4"></span>
            <span class="item item4"></span>
        </div>
    </div>
    <!-- 5 -->
    <div class="box box5">
        <div class="column5">           
            <span class="item item5"></span>
            <span class="item item5"></span>
        </div>
        <div class="column5">
            <span class="item item5"></span>
        </div>
        <div class="column5">           
            <span class="item item5"></span>
            <span class="item item5"></span>
        </div>
    </div>
    <!-- 6 -->
    <div class="box box6">
        <div class="column6">           
            <span class="item item6"></span>
            <span class="item item6"></span>
        </div>
        <div class="column6">
            <span class="item item6"></span>
            <span class="item item6"></span>
        </div>
        <div class="column5">           
            <span class="item item6"></span>
            <span class="item item6"></span>
        </div>
    </div>
</body>
</html>
日记本