用flex布局摆放骰子位置

用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;
    }