FLEX布局 及 六面骰子

参考文档：阮一峰—Flex 布局教程

codepen 地址

具体实现

<div style="display:flex;flex-wrap:wrap">
  <div class="div div1">
    <span class="circle"></span>
  </div>

  <div class="div div2">
    <span class="circle"></span>
    <span class="circle"></span>
  </div>

  <div class="div div3">
    <span class="circle"></span>
    <span class="circle asc"></span>
    <span class="circle ase"></span>
  </div>

  <div class="div4 div">
    <div class="df jcsa">
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
    <div class="df jcsa">
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </div>

  <div class="div5 div">
    <div class="df jcsa">
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
    <span class="circle asc"></span>
    <div class="df jcsa">
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </div>

  <div class="div6 div ">
    <div class="df fdc jcsa">
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
    <div class="df fdc jcsa">
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </div>
</div>

.ass {
  align-self: flex-start;
}
.asc {
  align-self: center;
}
.ase {
  align-self: flex-end;
}
.df {
  display: flex;
}
.aisa {
  align-items: space-around;
}
.jcsa {
  justify-content: space-around;
}
.fdc {
  flex-direction: column;
}
.div {
  width: 280px;
  height: 280px;
  border: 1px solid #666666;
  border-radius: 10px;
  display: flex;
  margin-left: 30px;
  margin-bottom: 30px;
  padding: 20px;
}
.div1 {
  justify-content: center;
  align-items: center;
}
.circle {
  width: 80px;
  height: 80px;
  background: #333333;
  border-radius: 50%;
}
.div2 {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.div3 {
  justify-content: space-around;
}
.div4 {
  flex-direction: column;
  justify-content: space-around;
}
.div5 {
  flex-direction: column;
  justify-content: space-around;
}

.div6 {
  justify-content: space-around;
}