flex 画骰子六面

// html
<div class="box1">
  <span></span>
</div>

// less
.box1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

// html
<div class="box2">
  <span></span>
  <span></span>
</div>

// less
.box2 {
  display: flex;
  justify-content: space-between;
  span:last-child {
    align-self: flex-end;
  }
}

// html
<div class="box3">
    <span></span>
    <span></span>
    <span></span>
</div>

// less
.box3 {
  display: flex;
  justify-content: space-between;
  span:nth-of-type(2) {
    align-self: center;
  }
  span:last-child {
    align-self: flex-end;
  }
}

// html
<div class="box4">
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
</div>

// less
.box4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  & > div {
    display: flex;
    justify-content: space-between;
  }
}

// html
<div class="box5">
    <div>
        <span></span>
        <span></span>
    </div>
    <span></span>
    <div>
        <span></span>
        <span></span>
    </div>
</div>

// less
.box5 {
  display: flex;
  justify-content: space-between;
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  & > span {
    align-self: center;
  }
}

// html
<div class="box6">
   <div>
       <span></span>
       <span></span>
       <span></span>
   </div>
   <div>
       <span></span>
       <span></span>
       <span></span>
   </div>
</div>

// less
.box6 {
  display: flex;
  justify-content: space-between;
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}