1、色子数:1
思路:让圆点(即子元素)在横轴上居中在竖轴上居中,分别用justify-content和align-items
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.main {
width: 200px;
height: 200px;
background: #fff;
border-radius: 20px;
margin: 100px auto;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items:center;
}
.main >div{
width:40px;
height:40px;
background:#000;
border-radius:40px;
}
</style>
</head>
<body>
<div class="main">
<div class="item"></div>
</div>
</body>
</html>
2、色子数:2
思路:竖列布局且在主轴方向采用justify-content的两端对齐布局,这样两个圆点会在左边呈现,然后采用align-items让其居中
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.main {
width: 200px;
height: 200px;
background: #fff;
border-radius: 20px;
margin: 100px auto;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items:center;
}
.main >div{
width:40px;
height:40px;
background:#000;
border-radius:40px;
}
</style>
</head>
<body>
<div class="main">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
3、色子数:3
思路:用到align-self属性让第二个和第三个圆点有自己的属性设置,分别在纵轴方向上居中和低端对齐
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.main {
width: 180px;
height: 180px;
background: #fff;
border-radius: 20px;
margin: 100px auto;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
}
.main >div{
width:40px;
height:40px;
background:#000;
border-radius:40px;
}
.item:nth-child(2){
align-self:center;
}
.item:nth-child(3){
align-self:flex-end;
}
</style>
</head>
<body>
<div class="main">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
4、色子数:4
思路:先竖着放两行圆点,每行圆点里横着放两个圆点,所以最外层父元素设置align,里面的父元素设置justify-content
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.main {
width: 180px;
height: 180px;
background: #fff;
border-radius: 20px;
margin: 100px auto;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-wrap:wrap;
align-content:space-between;
}
.column >div{
width:40px;
height:40px;
background:#000;
border-radius:40px;
}
.column{
flex-basis:100%;
display:flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
5、色子数:5
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.main {
width: 180px;
height: 180px;
background: #fff;
border-radius: 20px;
margin: 100px auto;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex-wrap:wrap;
align-content:space-between;
}
.column > div{
width:40px;
height:40px;
background:#000;
border-radius:40px;
}
.column{
flex-basis:100%;
display:flex;
justify-content: space-between;
}
.column:nth-child(2){
justify-content: center;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
6、色子数:6
思路:跟四点的一样,先竖放三行在每行横放两个圆点
实现代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.main {
width: 180px;
height: 180px;
background: #fff;
border-radius: 20px;
margin: 100px auto;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-content:space-between;
flex-wrap:wrap;
}
.column > div{
width:40px;
height:40px;
background:#000;
border-radius:40px;
}
.column{
flex-basis:100%;
display:flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="column">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>