用flex布局摆放骰子位置
1点
.box{
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 20px;
/*主轴侧轴方向居中*/
display: flex;
justify-content: center;
align-items: center;
}
.box>div{
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
}
2点
.box{
display: flex;
justify-content:space-around;
}
/*单独设置两个盒子的侧轴方向*/
.box>div:nth-child(1){
margin-top: 20px;
align-self: flex-start;
}
.box>div:nth-child(2){
margin-bottom: 20px;
align-self:flex-end;
}
3点
.box{
display: flex;
justify-content:space-around;
}
.box>div:nth-child(1){
margin-top: 20px;
align-self: flex-start;
}
.box>div:nth-child(2){
align-self: center;
}
.box>div:nth-child(3){
margin-bottom: 20px;
align-self:flex-end;
}
4点
分为上下两个盒子进行换行 在小盒子里面再对点数进行布局
<div class="box">
<div class="box1">
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
</div>
.box{
display: flex;
flex-wrap: wrap;
/*改变主轴方向*/
flex-direction: column;
justify-content:space-around;
align-items: center;
}
.box>div{
width: 200px;
display: flex;
justify-content: space-around;
}
.box>div>div{
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
}
5点
<div class="box">
<div class="box1">
<div></div>
<div></div>
</div>
<div></div>
<div class="box2">
<div></div>
<div></div>
</div>
</div>
.box{
display: flex;
flex-wrap: wrap;
/*改变主轴方向*/
flex-direction: column;
justify-content:space-around;
}
.box>div{
width: 200px;
display: flex;
justify-content: space-around;
}
.box>div>div,
.box>div:nth-child(2){
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
}
/*中间的盒子单独设置*/
.box>div:nth-child(2){
align-self: center;
}
6点
<div class="box">
<div class="box1">
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
</div>
.box{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content:space-around;
}
.box>div {
width: 200px;
display: flex;
justify-content: space-around;
}