不囉嗦 上效果
全部使用彈性佈局，實現骰子上的點進行排列
思路：
骰子1：父元素設置display：flex，設置參數
justify-content:center;align-items:center;實現黑點的水平、垂直居中
骰子2：第一個點本身就在左上角，主要是要對第二個點進行定位，設置參數justify-content:center;後兩個點水平分開兩端對齊，在單獨對第二個點設置align-self:flex-end;使點底部對齊
骰子3：原理同骰子1+骰子2
骰子4：這裏需要先將點分成2列，不然會在一排顯示，不好佈局flex-direction:column;使得主軸變爲縱向 後面就很簡單了
骰子5：同骰子4+骰子1
代碼如下
<head>
<style>
html,body{width:100%;height:100%;}
body{display:flex;justify-content:center;align-items:center;}
p{margin:0;}
ul{display:flex;}
ul li{display:flex;height:100px;width:100px;margin:30px;padding:5px;border:2px solid #CCC;border-radius:10px;list-style:none;}
ul li i{height:25px;width:25px;background:#333;border-radius:50%;box-shadow:inset 0 -3px #999;}
ul li:nth-child(1){justify-content:center;align-items:center;}
ul li:nth-child(2){justify-content:space-between;}
ul li:nth-child(2) i:nth-child(2){align-self:flex-end;}
ul li:nth-child(3){justify-content:space-between;}
ul li:nth-child(3) i:nth-child(2){align-self:center;}
ul li:nth-child(3) i:nth-child(3){align-self:flex-end;}
ul li:nth-child(4){justify-content:space-between;flex-direction:column;}
ul li:nth-child(4) p{display:flex;justify-content:space-between;}
ul li:nth-child(5){justify-content:space-between;flex-direction:column;}
ul li:nth-child(5) p{display:flex;justify-content:space-between;}
ul li:nth-child(5) .center{align-self:center;}
ul li:nth-child(6){justify-content:space-between;flex-direction:column;}
ul li:nth-child(6) p{display:flex;justify-content:space-between;}
</style>
</head>
<body>
<ul>
<li><i></i></li>
<li><i></i><i></i></li>
<li><i></i><i></i><i></i></li>
<li>
<p><i></i><i></i></p><p><i></i><i></i></p>
</li>
<li>
<p><i></i><i></i></p><i class="center"></i><p><i></i><i></i></p>
</li>
<li><p><i></i><i></i></p><p><i></i><i></i></p><p><i></i><i></i></p></li>
</ul>
</body>