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;
}
四點效果
五點和六點我是直接在四點和一點的基礎上做的，原理一樣，不再闡述。