一点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/55ecedda273dc89de432184f265ab9de.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
display: flex;
justify-content: center;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
</div>
</body>
</html>
两点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/99b1f47fa0082a88e45854f174a5132d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>
三点
简易版
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4c683fd2a9a98b3a37def99390bc9d0f.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>
复杂版
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a2019f39438c8ddb3a9c1878ff224651.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
.point:nth-child(2) {
align-self: center;
}
.point:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>
四点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/637e9ea3d13962dd84a6ba71f83a2f26.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.row {
display: flex;
justify-content: space-evenly;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</body>
</html>
五点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f9b53e3de1c388ea8f9a051318cf1d9a.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.row1 {
display: flex;
justify-content: space-between;
}
.row2 {
display: flex;
justify-content: center;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="row1">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row2">
<div class="point"></div>
</div>
<div class="row1">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</body>
</html>
六点
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/267bc6cb3e203678673340b16e45bff9.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css flex布局-画骰子</title>
<style>
.box {
margin: 20px;
height: 100px;
width: 100px;
border: 2px solid grey;
border-radius: 10px;
padding: 10px 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row {
display: flex;
justify-content: space-evenly;
}
.point {
border-radius: 50%;
height: 20px;
width: 20px;
background: black;
}
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="row">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</body>
</html>