参考资料：Flex布局教程：实例篇
- 色子外形
<!-- 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%;
}
- 色子的点数
色子的点数主要通过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;
}
- 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;
}
存在语言描述不清的情况，看色子的示例更清晰。
