基于flex通关的青蛙游戏24关之详解

简介: 本文为大家带来一个既好玩又能让大家熟练掌握flex的游戏:青蛙跳跳跳。

游戏介绍

青蛙游戏即利用flex布局的属性,即项目属性以及容器属性来将青蛙移动到荷叶上就算通关

比如下面,青蛙原本在左面,我利用flex的justify-content将青蛙在主轴上的对齐方式定义为右对齐,完成后青蛙就蹦到了我们的荷叶上完成通关。

1.webp.jpg1.webp.jpg

开始游戏

1.webp.jpg

between与around的差别与应用

在三,四关的时候,我们需要应用到了使项目如下图所示荷叶的情况  我们要使我们的青蛙跳到荷叶上的话就必须使用能将项目间隔相等的情况   所以我们必须使用around或者between ,当然两者有区别,如下

  1. around:使项目之间间隔相等,注意这里,我们可以将其理解为每个项目左右两边都有一个对外的边距,这个边距也对两端有效,所以两个项目的距离是项目与边缘距离的二倍。
  2. between:使项目两端对齐且项目之间间隔相等,也就是说其不用考虑与边缘的距离,即只考虑项目与项目之间。

1.webp.jpg1.webp.jpg1.webp.jpg


在交叉轴和主轴定义对齐方式的综合应用

  1. 第五关的荷叶在下方,所以我们使用交叉轴的定义对齐方式使青蛙跳到合理的位置

1.webp.jpg

  1. 第七关的荷叶中间,所以我们只要使用主轴和交叉轴的居中对齐使青蛙跳到了中心

1.webp.jpg

主轴方向的定义与对齐方式的综合应用

  1. 第八关使用主轴方向和起点的位置,大家可能会直接使用右对齐,但是要注意青蛙的颜色与荷叶的颜色来进行对齐设置

1.webp.jpg1.webp.jpg

  1. 第九关简单地使他们的主轴方向定义为交叉轴,由上到下排列

1.webp.jpg

  1. 第十关需要我们将三个青蛙用主轴定义使其顺序颠倒,然后再使用对齐方式移动到左边来但是要注意,对齐方式是按照我们主轴的起点来相对的,所以在这里我们的三只青蛙需要用end移动到左边来。

1.webp.jpg

4. 第十一关和上一关差不多,需要注意的是我们定义竖直方向为主轴后,想要改变对齐方式还是要用主轴的justify-content来改变

1.webp.jpg1.webp.jpg

  1. 第十三关是直接使用了主轴上居中与交叉轴上终点对齐的对齐方式并讲主轴的起点颠倒

1.webp.jpg

项目权重属性的使用

  1. 我们这里可以直接使用order来改变子项目的权重来使红黄的位置改变

1.webp.jpg1.webp.jpg1.webp.jpg

项目对齐方式的覆盖使用

  1. 第十六关我们只需要把黄色的对齐方式改为与终点处对齐,覆盖掉为五个项目定义的属性

1.webp.jpg

权重和覆盖对齐的综合使用

  1. 第十七关我们先让黄色的权重大于绿色使他们在绿色后面,最后使用对齐的覆盖使黄色在终点对齐

1.webp.jpg

项目排列方式的属性

  1. 我们使用wrap来根据项目大小与容器大小来使它们按顺序排序

1.webp.jpg

  1. 当然我们还可以使用flex-flow来用一行代码解决排列问题

1.webp.jpg

多根轴线对齐的使用


1.webp.jpg1.webp.jpg1.webp.jpg



BOSS关卡

第24关我们先把它的主轴改变改为竖直方向且相反使绿色和红色按顺序排好,我们再使用wrap来使绿色和红色放在对应处,注意这里我们可以知道默认的主轴为竖直方向,然后我们再调整一下主轴方向的对齐方式变为居中使黄色两个青蛙居中,下一步就很荣容易踩坑,我们通常会用起点对齐来使黄色来向左对齐 ,但是右边的绿色和红色也会跟着走,所以我们可以使用space-between来实现黄色在左边对齐又不影响到绿色和红色。

1.webp.jpg

END

希望大家在学完flex布局之后来玩一次青蛙游戏,加深布局印象,将思想带入到开发中。



相关文章
使用Flex实现色子游戏
这个是蓝桥杯第一期楼赛的题,通过flex将盒子中的点按照特定的布局排列排成九个色子
129 0
使用Flex实现色子游戏
|
4月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
2月前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
|
3月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
402 57
|
1月前
|
容器
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`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等