本文中只是熟悉基本屬性的用法，并完成一組骰子各個面的制作。在下面的內(nèi)容我不會涉及flexbox一些比較棘手的問題，比如舊版本語法、供應(yīng)商前綴、瀏覽器怪癖等：

一、First Face
我們知道，骰子有六個面，每個面的點(diǎn)的個數(shù)代表該面的值，第一個面由一個水平垂直居中的點(diǎn)組成。下面來看具體的實現(xiàn)：

CSS Code復(fù)制內(nèi)容到剪貼板

 <section name="01" class="face-01">   
  <span class="dot"></span>   
 </section>   
face-01 {   
display: flex;   
justify-content: center;   
align-items: center;   

關(guān)于justify-content和align-items的用法請參考這里justify-content，align-items。使用flexbox，垂直居中兩行屬性就可以搞定，很easy!

二、Second Face

CSS Code復(fù)制內(nèi)容到剪貼板

.face-02 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-02 .dot:nth-of-type(2) {   
 align-self: flex-end;   
}   
  <section name="02" class="face-02">   
   <span class="dot"></span>   
   <span class="dot"></span>   
  </section>  

這里我們不能使用align-items屬性，使用它兩個點(diǎn)都會受影響，flexbox提供了一個align-self屬性，這個屬性可以讓我們更方便的控制flex items的各項沿著cross axias方向，設(shè)置不同的布局。align-self的用法參考這里align-self。

三、Third Face

CSS Code復(fù)制內(nèi)容到剪貼板

.face-03 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-03 .dot:nth-of-type(2) {   
 align-self: center;   
}   
.face-03 .dot:nth-of-type(3) {   
 align-self: flex-end;   
}   
<section name="03" class="face-03">   
 <span class="dot"></span>   
 <span class="dot"></span>   
 <span class="dot"></span>   
</section>  

該face與second face 使用的屬性相同，不再解釋。

四、Fourth Face

CSS Code復(fù)制內(nèi)容到剪貼板

.face-04 {   
 display: flex;