flex布局—骰子的六个平面

hululugogo
已于 2024-03-25 09:44:02 修改
阅读量623
点赞数 1
分类专栏： CSS 前端文章标签：平面 css 前端
于 2021-08-05 19:06:10 首次发布
本文链接：https://blog.csdn.net/weixin_43622279/article/details/119424958
版权
前端同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
CSS
5 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .number1{
            width: 200px;
            height: 200px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .a1{
            width:50px;
            height: 50px;
            background-color: white;
        }
        .number2{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            margin-right:10px;
            display: flex;
            justify-content:space-between;
            float: left;
        }
        .a2{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
        }
        .b2{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
            align-self:flex-end;
        }
        .number21{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
            justify-content:space-between;
        }
        .a21{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
            align-self:flex-end;
        }
        .b21{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
        }
        .number3{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
            float: left;
            margin-right:10px;
        }
        .a3{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
            align-self: flex-end;
        }
        .b3{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
            align-self: center;

        }
        .c3{
            width:50px;
            height: 50px;
            background-color: white;
            margin:10px;
        }
        .number33{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
        }
        .a33{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
        }
        .b33{
            width:50px;
            height: 50px;
            background-color: white;
            margin: 10px;
            align-self: center;

        }
        .c33{
            width:50px;
            height: 50px;
            background-color: white;
            margin:10px;
            align-self: flex-end;
        }
        .number4{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            justify-content: center;
        }
        .a4{
            width:50px;
            height: 50px;
            background-color: white;
            margin:10px;
        }
        .b4{
            width:50px;
            height: 50px;
            background-color: white;
            margin:10px;
        }
        .c4{
            width:50px;
            height: 50px;
            background-color: white;
            margin:10px;
        }
        .d4{
            width:50px;
            height: 50px;
            background-color: white;
            margin:10px;
        }
        .number5{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;
            
        }
        .a5{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .b5{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
            margin-top: 80px;
            
        }
        .c5{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .d5{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .e5{
            width:40px;
            height: 40px;
            background-color: white;
            margin: 10px;
        }
        .number6{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            float: left;
            margin-right: 10px;
            
        }
        .a6{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .b6{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
            
        }
        .c6{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .d6{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .e6{
            width:40px;
            height: 40px;
            background-color: white;
            margin: 10px;
        }
        .f6{
            width:40px;
            height: 40px;
            background-color: white;
            margin: 10px;
        }
        .number66{
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            
        }
        .a66{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .b66{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
            
        }
        .c66{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .d66{
            width:40px;
            height: 40px;
            background-color: white;
            margin:10px;
        }
        .e66{
            width:40px;
            height: 40px;
            background-color: white;
            margin: 10px;
        }
        .f66{
            width:40px;
            height: 40px;
            background-color: white;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <!--骰子1-->
    <div class="number1">
        <div class="a1">
        </div>
    </div>
    <!--骰子2-->
    <div class="number2">
        <div class="a2">
        </div>
        <div class="b2">
        </div>
    </div>
    <div class="number21">
        <div class="a21">
        </div>
        <div class="b21">
        </div>
    </div>
    <!--骰子3-->
    <div class="number3">
        <div class="a3">
            1
        </div>
        <div class="b3">
            2
        </div>
        <div class="c3">
            3
        </div>
    </div>
    <div class="number33">
        <div class="a33">
            1
        </div>
        <div class="b33">
            2
        </div>
        <div class="c33">
            3
        </div>
    </div>
    <!--骰子4-->
    <div class="number4">
        <div class="a4">
        </div>
        <div class="b4"></div>
        <div class="c4"></div>
        <div class="d4"></div>
    </div>
    <!--骰子5-->
    <div class="number5">
        <div class="a5">1</div>
        <div class="b5">2</div>
        <div class="c5">3</div>
        <div class="d5">4</div>
        <div class="e5">5</div>
    </div>
     <!--骰子6-->
     <div class="number6">
        <div class="a6">1</div>
        <div class="b6">2</div>
        <div class="c6">3</div>
        <div class="d6">4</div>
        <div class="e6">5</div>
        <div class="f6">6</div>
    </div>
    <div class="number66">
        <div class="a66">1</div>
        <div class="b66">2</div>
        <div class="c66">3</div>
        <div class="d66">4</div>
        <div class="e66">5</div>
        <div class="f66">6</div>
    </div>
</body>
</html>