不啰嗦 上效果
全部使用弹性布局，实现骰子上的点进行排列
思路：
骰子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>