Flex布局：色子篇

参考资料：Flex布局教程：实例篇

色子

1. 色子外形

<!-- html-->
<div class="first-face">
  <span class="pip"></span>
</div>

色子的外形主要通过box-shadow和border-radius实现，box-shadow设置了上、下、左、右四个值。

/* css */
[class$="face"] {
  width: 104px;
  height: 104px;
  margin: 16px;
  padding: 4px;
  background-color: #e7e7e7;
  box-shadow: 0 5px #fff inset, 0 -5px #bbb inset, 5px 0 #d7d7d7 inset, -5px 0 #d7d7d7 inset;
  border-radius: 10%;
}

2. 色子的点数
   色子的点数主要通过border-radius，box-shadow使得点数更形象。

/* css */
.pip {
  display: block;
  width: 24px;
  height: 24px;
  margin: 4px;
  background-color: #333;
  border-radius: 50%;
  box-shadow: 0 3px #111 inset, 0 -3px #555 inset;
}

3. 1-6点数
   <span>代表色子的点数，1-6点数分别包含1-6个<span>

点数1：将项目水平、垂直居中即可。

<!-- html -->
<div class="first-face">
  <span class="pip"></span>
</div>

/* css */
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

点数2：设置项目水平（主轴）方向两端对齐，单独设置第二个项目底端对齐。

<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>

.second-face {
  display: flex;
  justify-content: space-between;
}
.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}

注：一般css中常用到nth-child(n)，与此处的nth-of-type两者的功能是比较相近的，但有一定区别，详见nth-of-type和nth-child的区别。

点数3：设置项目水平（主轴）方向两端对齐，单独设置第二个项目垂直居中，第三个项目底端对齐。

<div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>

.third-face {
  display: flex;
  justify-content: space-between;
}
.third-face .pip:nth-of-type(2) {
  align-self: center;
}
.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}

点数4：相对有些繁琐，需要将4个点分成两组，将两组水平方向两端对齐，设置两组的组内也同样两端对齐。

<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>

.fourth-face {
  display: flex;
  justify-content: space-between;
}
.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

点数5：与点数4基本一致，只是多了一个点且水平、垂直居中。

<div class="fifth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>

.fifth-face {
  display: flex;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(1), .fifth-face .column:nth-of-type(3) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
  align-self: center;
}

点数6：设置flex-wrap: wrap后，一行最多3个点，所以不需要按点数4的方案来设置，设置主轴为垂直方向且换行，并设置交叉轴两端对齐。

<div class="sixth-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>

.sixth-face {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
}

存在语言描述不清的情况，看色子的示例更清晰。