这个是蓝桥杯第一期楼赛的题，通过flex将盒子中的点按照特定的布局排列排成九个色子
游戏规则
代码准备
- 盒子样式
body>div { display: flex; width: 100px; height: 100px; border-radius: 4px; border: 2px solid red; box-sizing: border-box; } 复制代码
- 黑色点子的样式
p { width: 15px; height: 15px; background-color: black; border-radius: 50%; margin: 2px; } 复制代码
- 盒子的结构
<div class="div1"> <p></p> </div> 复制代码
其中不同数量的色子的代码结构不同，如果是4个及以上的色子每层的点需要再套一层盒子
布局规则
我们需要将黑色点按照上图排列，其中每个点代表HTML结构中的p标签，在上面已经做好样式准备了，做好准备就可以开始针对色子进行布局。
开始布局
第一个色子
第一个色子需要将一个点布局到中间，使用flex布局的话只需要主轴和交叉轴使用居中就可以将点居中了代码如下
.div1 { justify-content: center; align-items: center; } 复制代码
第二个色子
第二个色子按照图中来看，我们首先可以将交叉轴定为主轴，再通过space-around来使黑点与周围元素距离相等，这里不能使用space-between因为会使黑点贴边，达不到效果，最后再使交叉轴对齐，这里是横轴，因为我们第一步已经定义主轴为交叉轴了
div:nth-child(2) { flex-direction: column; justify-content: space-around; align-items: center; } 复制代码
第三个色子
第三个色子需要我们对项目进行操控，所谓的项目就是黑点，首先先使用space-around来讲元素的间隔相等，之后再使交叉轴居中，现在就可以操纵子项了，使用align-self分别左对齐和右对齐来使它变成3点数。
div:nth-child(3) { justify-content: space-around; align-items: center; padding: 3px 0 3px 0; } div:nth-child(3)>:nth-child(1) { align-self: flex-start; } div:nth-child(3)>:nth-child(3) { align-self: flex-end; } 复制代码
第四个色子
第四个色子我们需要将第二层的两个盒子排版好在最外层盒子使用space-around来使两个盒子间隔相等，再在第二层盒子使用交叉轴改变，间隔相等。最后即可得到四点数色子
div:nth-child(4) { justify-content: space-around; } div:nth-child(4)>div { display: flex; flex-direction: column; justify-content: space-around; } 复制代码
第五个及其他
之后的所有色子的原理和第四个原理相同，大家可以参考第四个色子的原理来布局其他的。
最后
如果大家有更好的方法，可以在评论区底下进行讨论哟！
