使用Flex实现色子游戏

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

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

游戏规则

代码准备

  1. 盒子样式
body>div {
      display: flex;
      width: 100px;
      height: 100px;
      border-radius: 4px;
      border: 2px solid red;
      box-sizing: border-box;
}
复制代码
  1. 黑色点子的样式
p {
      width: 15px;
      height: 15px;
      background-color: black;
      border-radius: 50%;
      margin: 2px;
}
复制代码
  1. 盒子的结构
<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;
}
复制代码

第五个及其他

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

最后

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


目录
打赏
0
0
0
0
69
分享
相关文章
基于flex通关的青蛙游戏24关之详解
本文为大家带来一个既好玩又能让大家熟练掌握flex的游戏:青蛙跳跳跳。
818 5
基于flex通关的青蛙游戏24关之详解
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。