flex布局示例：骰子的制作

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>flex 布局</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <!-- 一点 -->
        <div class="dice dice1">
            <div class="dice-son"></div>
        </div>
        <!-- 两点 -->
        <div class="dice dice2">
            <div class="dice-son "></div>
            <div class="dice-son "></div>
        </div>
        <!-- 三点 -->
        <div class="dice dice3">
            <div class=" iteams iteams3">
                <div class="dice-son dice-son1"></div>
                <div class="dice-son dice-son2"></div>
                <div class="dice-son dice-son3"></div>
            </div>
        </div>
        <!-- 四点 -->
        <div class="dice dice4">
            <div class=" iteams items1">
                <div class="dice-son "></div>
                <div class="dice-son"></div>
            </div>
            <div class="iteams items2">
                <div class="dice-son "></div>
                <div class="dice-son "></div>
            </div>
        </div>
        <!-- 五点 ：四点和一点的结合-->
        <div class="dice dice5">
            <div class=" iteams items1">
                <div class="dice-son dice-son1"></div>
                <div class="dice-son dice-son2"></div>
            </div>
            <div class="dice dice1">
                <div class="dice-son"></div>
            </div>
            <div class="iteams items2">
                <div class="dice-son dice-son3"></div>
                <div class="dice-son dice-son4"></div>
            </div>
        </div>
        <!-- 六点：四点的结合 -->
        <div class="dice dice6">
            <div class=" iteams items1">
                <div class="dice-son dice-son1"></div>
                <div class="dice-son dice-son2"></div>
            </div>
            <div class="iteams items1">
                <div class="dice-son dice-son1"></div>
                <div class="dice-son dice-son2"></div>
            </div>
            <div class="iteams items2">
                <div class="dice-son dice-son3"></div>
                <div class="dice-son dice-son4"></div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

css样式代码：
*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 100px;
}
body{
    font-size: 0.16rem;
    display: flex;
    justify-content: center;
}

.container{
    width: 4.5rem;
    height: 4.5rem;
    background: #ccc;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
/* 给骰子最外层包裹一个div */
.dice{
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 0.5rem; */
}
/* 因为骰子四周有一个边距，这里我们给骰子嵌套一个div，将筛子里面的小圆写在嵌套的div里面，方便定位 */
.iteams{
    width: 0.8rem;
    height: 0.8rem;
    display: flex;
}
/* 筛子的内点样式 */
.dice-son{
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    background: #000;
}
/* 一点 */
.dice1{
    align-items: center;
    justify-content: center;
}

效果
在这里插入图片描述

/* 两点 */
.dice2{
    align-items: center;
    justify-content: space-around;
}

两点效果
在这里插入图片描述

/*三点*/
.iteams3{
    align-items: center;
    justify-content: space-between
}
.dice3 .iteams3 .dice-son1{
    align-self: flex-start;
}
.dice3 .iteams3 .dice-son3{
    align-self: flex-end;
}

三点效果
在这里插入图片描述

/* 四点 */
.dice4{
    justify-content: space-between;
}
.items1{
    flex-basis: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.items2{
    width: 0.8rem;
    height: 0.8rem;
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

四点效果
在这里插入图片描述

五点和六点我是直接在四点和一点的基础上做的，原理一样，不再阐述。

flex布局示例：骰子的制作

猜你喜欢