#过年不停更# 基于flex通关的青蛙游戏24关之详解 原创

春节不停更，此文正在参加「星光计划-春节更帖活动」

大家好，我是猪痞恶霸，入门未满一年的带学生一枚，请多多关照。

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

话不多说，我先给大家送上游戏链接！

青蛙游戏传送门

游戏介绍

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

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

开始游戏

between与around的差别与应用

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

1. around:使项目之间间隔相等，注意这里，我们可以将其理解为每个项目左右两边都有一个对外的边距，这个边距也对两端有效，所以两个项目的距离是项目与边缘距离的二倍。

2. between:使项目两端对齐且项目之间间隔相等，也就是说其不用考虑与边缘的距离，即只考虑项目与项目之间。
   

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

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

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

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

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

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

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

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

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

项目权重属性的使用

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

项目对齐方式的覆盖使用

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

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

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

项目排列方式的属性

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

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

多根轴线对齐的使用

BOSS关卡

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

END

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