使用Flex实现色子游戏

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

这个是蓝桥杯第一期楼赛的题，通过flex将盒子中的点按照特定的布局排列排成九个色子

游戏规则

代码准备

1. 盒子样式

   body>div {
         display: flex;
         width: 100px;
         height: 100px;
         border-radius: 4px;
         border: 2px solid red;
         box-sizing: border-box;
   }
   

2. 黑色点子的样式

    p {
         width: 15px;
         height: 15px;
         background-color: black;
         border-radius: 50%;
         margin: 2px;
   }
   

3. 盒子的结构

   <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;
}

第五个及其他

之后的所有色子的原理和第四个原理相同，大家可以参考第四个色子的原理来布局其他的。

最后

如果大家有更好的方法，可以在评论区底下进行讨论哟！