用flex布局写骰子

骰子一共有6个面，先构建6个div，写上样式：

.box1 {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;//盒子之间的间隙
            background-color: paleturquoise;
        }

骰子为1的最容易写，居中即可：

.contain {
            width: 20px;
            height: 20px;
            margin: 20px;
            border-radius: 50%;
            background-color: #000000;//小黑点
        }

骰子为2的时候，要考虑排列方式，增加flex-direction:column。

 .box2 {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin: 20px;
            background-color: paleturquoise;
        }

骰子为3时，在大盒子内写三个小盒子，flex-direction为默认排列方式，每个盒子对应不同的属性。

 .three1 {
            overflow: hidden;
            height: 200px;
            align-content: flex-start;
          }

 .three2 {
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: left;
            flex-direction: column;
            background-color: paleturquoise;
          }

 .three3 {
            height: 200px;
            display: flex;
          }

骰子为4的时候，在盒子内写两个盒子，左右分布。

 .two {
            width: 100px;
            height: 200px;
            display: flex;
            justify-content:space-around;
            flex-direction: column;
            align-items: center;
        }

骰子为5的时候，与为3的时候类似，都是在大盒子内写三个小盒子。

 .three {
            height: 200px;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

骰子为6的时候，与为4的时候类似，都是在大盒子内写两个小盒子，此时只需要更改小盒子里面的点数即可。

这样骰子的六个面的样子就算完成了。效果如下：