使用Flex实现色子游戏-阿里云开发者社区

使用Flex实现色子游戏

2022-12-05 79

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

这个是蓝桥杯第一期楼赛的题，通过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个及以上的色子每层的点需要再套一层盒子

布局规则

1.webp.jpg

我们需要将黑色点按照上图排列，其中每个点代表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;
}
复制代码