前文提要：在之前的文章中我們已經學習過彈性布局，今天我們就使用彈性布局快速製作一枚骰子。
友情提示：如果沒有學過彈性布局，可查看 「[CSS3]快速掌握Flex彈性布局」該篇文章進行學習。文章連結為 ：[CSS3]快速掌握Flex彈性布局
一、頁面的模版<div class="xxx-face"> <span class="pip"></span></div>二、頁面統一樣式* { box-sizing: border-box;}html, body { height: 100%;}
body { display: flex; align-items: center; justify-content: center; vertical-align: center; flex-wrap: wrap; align-content: center; font-family: 'Open Sans', sans-serif; background: linear-gradient(top, #222, #333);}
[class$="face"] { margin: 16px; padding: 4px; background-color: #e7e7e7; width: 104px; height: 104px; object-fit: contain; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; border-radius: 10%;}
.pip { display: block; width: 24px; height: 24px; border-radius: 50%; margin: 4px;
background-color: #333; box-shadow: inset 0 3px #111, inset 0 -3px #555;}三、開始製作小骰子🎲
1、製作1點
說明：骰子的1點位於正中間。
1.1、頁面布局
<div class="first-face"> <span class="pip"></span></div>1.2、樣式
.first-face { display: flex; justify-content: center; align-items: center;}2、製作2點
說明：骰子的2點位於左上、右下。
2.1、頁面布局
<div class="second-face"> <span class="pip"></span> <span class="pip"></span></div>2.2、樣式
.second-face { display: flex; justify-content: space-between;}
.second-face .pip:nth-of-type(2) { align-self: flex-end;}3、製作3點
說明：骰子的3點位於左上、中間、右下。
3.1、頁面布局
<div class="third-face"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span></div>3.2、樣式
.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點
骰子的4點分別位於四個角，可兩兩組對布局。
4.1、頁面布局
<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>4.2、樣式
.fourth-face { display: flex; justify-content: space-between;}
.fourth-face .column { display: flex; flex-direction: column; justify-content: space-between;}5、製作5點
骰子的5點分別位於四個角及正中間，可按照排布順序組對布局即可。
5.1、頁面布局
<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>5.2、樣式
.fifth-face { display: flex; justify-content: space-between;} .fifth-face .column { display: flex; flex-direction: column; justify-content: space-between;} .fifth-face .column:nth-of-type(2) { justify-content: center;}6、製作6點
骰子的6點每三點位於左右兩側，故可與4點效果一致即可。
6.1、頁面布局
<div class="sixth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div></div>6.2、樣式
.sixth-face { display: flex; justify-content: space-between;}
.sixth-face .column { display: flex; flex-direction: column; justify-content: space-between;}四、總結
完整效果
總結：怎麼樣，是不是很簡單？那趕快動手練起來吧。