CSS3的Flexbox骰子布局的实现及问题讲解

本文中只是熟悉基本属性的用法，并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题，比如旧版本语法、供应商前缀、浏览器怪癖等：

一、First Face
我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现：

1.  <section name="01" class="face-01">   
2.   <span class="dot"></span>   
3.  </section>   
4. face-01 {   
5. display: flex;   
6. justify-content: center;   
7. align-items: center;   

关于justify-content和align-items的用法请参考这里justify-content，align-items。使用flexbox，垂直居中两行属性就可以搞定，很easy!

二、Second Face

1. .face-02 {   
2.  display: flex;   
3.  justify-content: space-between;   
4. }   
5. .face-02 .dot:nth-of-type(2) {   
6.  align-self: flex-end;   
7. }   
8.   <section name="02" class="face-02">   
9.    <span class="dot"></span>   
10.    <span class="dot"></span>   
11.   </section>  

这里我们不能使用align-items属性，使用它两个点都会受影响，flexbox提供了一个align-self属性，这个属性可以让我们更方便的控制flex items的各项沿着cross axias方向，设置不同的布局。align-self的用法参考这里align-self。

三、Third Face

1. .face-03 {   
2.  display: flex;   
3.  justify-content: space-between;   
4. }   
5. .face-03 .dot:nth-of-type(2) {   
6.  align-self: center;   
7. }   
8. .face-03 .dot:nth-of-type(3) {   
9.  align-self: flex-end;   
10. }   
11. <section name="03" class="face-03">   
12.  <span class="dot"></span>   
13.  <span class="dot"></span>   
14.  <span class="dot"></span>   
15. </section>  

该face与second face 使用的属性相同，不再解释。

四、Fourth Face

1. .face-04 {   
2.  display: flex;   
3.  justify-content: space-between;   
4.  flex-direction: column;   
5. }   
6. .face-04 .column {   
7.  display: flex;   
8.  justify-content: space-between;   
9. }   
10. <section name="04" class="face-04">   
11.   <div class="column">   
12.     <span class="dot"></span>   
13.     <span class="dot"></span>   
14.   </div>   
15.   <div class="column">   
16.     <span class="dot"></span>   
17.     <span class="dot"></span>   
18.   </div>   
19. </section>  

本例中使用了flex-direction，从字面意