參考資料：Flex布局教程：實例篇
- 色子外形
<!-- html-->
<div class="first-face">
<span class="pip"></span>
</div>
色子的外形主要通過box-shadow和border-radius實現(xiàn)晶框，box-shadow設(shè)置了上、下、左皮迟、右四個值。
/* 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%;
}
- 色子的點數(shù)
色子的點數(shù)主要通過border-radius桑寨，box-shadow使得點數(shù)更形象伏尼。
/* 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點數(shù)
<span>代表色子的點數(shù)，1-6點數(shù)分別包含1-6個<span>
點數(shù)1：將項目水平尉尾、垂直居中即可爆阶。
<!-- html -->
<div class="first-face">
<span class="pip"></span>
</div>
/* css */
.first-face {
display: flex;
justify-content: center;
align-items: center;
}
點數(shù)2：設(shè)置項目水平（主軸）方向兩端對齊，單獨設(shè)置第二個項目底端對齊。
<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兩者的功能是比較相近的班套，但有一定區(qū)別，詳見nth-of-type和nth-child的區(qū)別故河。
點數(shù)3：設(shè)置項目水平（主軸）方向兩端對齊吱韭，單獨設(shè)置第二個項目垂直居中，第三個項目底端對齊鱼的。
<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;
}
點數(shù)4：相對有些繁瑣理盆，需要將4個點分成兩組，將兩組水平方向兩端對齊鸳吸，設(shè)置兩組的組內(nèi)也同樣兩端對齊熏挎。
<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;
}
點數(shù)5：與點數(shù)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;
}
點數(shù)6：設(shè)置flex-wrap: wrap后，一行最多3個點养匈，所以不需要按點數(shù)4的方案來設(shè)置哼勇，設(shè)置主軸為垂直方向且換行，并設(shè)置交叉軸兩端對齊呕乎。
<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;
}
存在語言描述不清的情況积担，看色子的示例更清晰。
