如何用flex定位写出骰子的六个面

注：class=“face”设置的为骰子的样式 仅写一次 每个骰子都添加了class为face的属性名

• 一点时

body：

<div class="face face1">
        <span></span>
    </div>

css：

   .face{
      float: left;
      margin: 16px;
      padding: 4px;
      background-color: #e7e7e7;
      width: 104px;
      height: 104px;
      box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
      border-radius: 10%;
     }
     .face span{
   	  display: block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin: 4px;
      background-color: #333;
      box-shadow: inset 0 3px #111, inset 0 -3px #555;
     }
     .face1{
         display:flex;
         align-items: center;
         justify-content: center;
     }

• 两点时

body：

    <div class="face face2">
        <span></span>
        <span></span>
    </div>

css：

     .face2{
         display: flex;
         justify-content:space-between;
     }
     .face2 span:nth-child(2){
         align-self: flex-end;
     }

• 三点时
  body：

     
       <div class="face face3">
            <span></span>
            <span></span>
            <span></span>
        </div>
     

css：

     .face3{
         display: flex;
         justify-content: space-between;
     }
     .face3 span:nth-child(2){
        align-self: center;
     }
     .face3 span:nth-child(3){
         align-self: flex-end;
     }

• 四点时
  body：

    <div class="face face4">
        <div class="clumn">
            <span></span>
            <span></span>
        </div>
        <div class="clumn">
            <span></span>
            <span></span>
        </div>
    </div>

css：

 .face4{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
     } 
     .face4 .clumn{
         display: flex;
         flex-basis: 100%;
         justify-content: space-between;
     }
     .face4 .clumn:nth-child(2){
         align-self: flex-end;
     }

• 五点时
  body：

    <div class="face face5">
        <div class="clumn">
            <span></span>
            <span id="inner"></span>
            <span></span>
        </div>
        <div class="clumn">
            <span></span>
            <span></span>
        </div>
    </div>

css：

     .face5{
         display: flex;
        flex-wrap: wrap;
     }
     .face5 .clumn{
      display: flex; 
      flex-basis: 100%;
      justify-content: space-between;
     }
     .face5 .clumn:nth-child(2){
         align-self: flex-end;
     }
     .face5 #inner{
       margin-top: 40px;
     }

• 六点时
  body：

   <div class="face face6">
        <div class="clumn">
            <span></span>
            <span></span>
        </div>
        <div class="clumn">
            <span></span>
            <span></span>
        </div>
        <div class="clumn">
            <span></span>
            <span></span>
        </div>
    </div>

css：

    .face6{
            display: flex;
            flex-wrap: wrap;
         }
         .face6 .clumn{
            display: flex;
            flex-basis: 100%;
            justify-content: space-between;
         }