flex froggy 青蛙跳荷叶的小游戏答案

想必大家在学习web前端开发的时候都接触过flex布局吧,个人学识短浅,今天分享一个flex布局的小游戏给现在正在学习前端开发的小白!

制作不易,希望大家点赞支持一下,谢谢! 由于文章比较长,我把这个游戏链接放在这里 Flexbox Froggy - A game for learning CSS flexbox 想玩的小伙伴可以点击进去玩一下,可以考一下你们对flex布局的掌握!

1. justify-content 属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素，并且接受以下几个参数：

flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。

2. 再用justify-content一次来帮助这些青蛙到他们的荷叶上。记住这个CSS属性能水平对齐元素，并接受这些参数：

3.仅靠justify-content来帮助全部三只青蛙找到他们的荷叶。这次荷叶周边都有很多的空地。

如果你忘了一个CSS属性可选的值的话，你可以将鼠标移到参数名上面来查看。试试将鼠标移到justify-content。

4.现在边上的荷叶都漂到了岸上，使得他们之间的间距变大了。使用justify-content。这次荷叶之间有相等的距离。

5.现在用align-items来帮助青蛙们到池塘的底部。这个CSS属性纵向对齐元素并且可选以下几个值：

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。

6.使用justify-content和align-items的组合来指引青蛙们到池塘中央。

7.这些青蛙又需要穿过池塘了。这次有些荷叶周围有充足的距离。用justify-content和align-items的组合。

8. 青蛙们需要和他们的荷叶保持对应的顺序。我们可以用flex-direction属性。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

9. 使用flex-direction属性，帮助青蛙们找到它们该去的列。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

10. 帮助青蛙们回到它们的荷叶上。尽管它们看上去离的很近，需要用flex-direction和justify-content来帮它们到那里。

注意当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了。

11. 用flex-direction和justify-content来帮助青蛙找到他们的方向

注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

12.用flex-direction和justify-content来帮助青蛙回到他们的荷叶上。

13.用flex-direction，justify-content以及align-items来帮助青蛙回到他们的荷叶上。

14.有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

用order来调整青蛙的顺序。

15. 用order属性来把红青蛙送回它的荷叶去。

16.另一个你可以使用的控制单个元素的属性是align-self。这个属性接受和align-items一样的那些值。

17.用order和align-self的组合来帮助青蛙们到它们的目的地。

18.哦不！这些青蛙都挤到一行了。用flex-wrap属性把它们分散看看。这个属性接受这些值：

nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行。

19. 帮这些青蛙们排成整齐的三列。使用flex-direction和flex-wrap的组合。

20.flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行。
试着用flex-flow来重复上一关的任务。

21. 青蛙们在池塘里到处都是，然而荷叶都在顶部。你可以使用align-content来决定行与行之间隔多远。这个属性接受这些值：

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。
这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

22.现在水流把荷叶都推到底部了。用align-content来指引青蛙到那里。

23.青蛙们开完了派对，现在该回家了。用flex-direction和align-content的组合来把它们带回各自的家。

24. 用这些你所学的CSS属性，最后一次把青蛙们带回家:

justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content

flex froggy 青蛙跳荷叶的小游戏答案相关推荐

这款跳来跳去的小游戏，是微信小程序的年度大招
虎嗅注:今天,应该有很多人的朋友圈都被一款跳来跳去的小游戏刷屏了.这是微信小程序年底的大招:"小游戏".其实过去小程序一直没有排斥过游戏,只是在张小龙的规划里,还"时机未 ...
css小游戏，js小游戏，Flex Box青蛙、冒险游戏、设计模式游戏等
刚发现的小游戏,挺好玩的,分享一波通过flex布局,让青蛙回到正确的位置上,地址戳这里我卡在最后一关没有通过,通过的还请赐教发现有一篇文章有很详细的地址链接,有兴趣的可以试试转自作者零一的博客 ...
揭密微信《跳一跳》小游戏那些外挂
张小龙:这个游戏发布以后,其实它的效果有点超出我们的预期,我们自己开玩笑说,这个游戏突然变成了有史以来可能用户规模最大的一个游戏,因为它的DAU大概到了1点几亿,但同时出现了很多外挂,我没有想到这么小 ...
C语言跳过障碍物小游戏,html5飞翔的小鸟越过障碍物小游戏代码
一款简单好玩的html5 canvas飞翔的小鸟越过障碍物小游戏代码,玩法:点击鼠标控制小鸟飞行. 查看演示下载资源: 11 次下载资源下载积分: 30 积分 js代码 var cvs = do ...
Flexbox Froggy 小游戏答案 ☆ 学习Flex布局
flex属性和display(inline,block,inline-block)属性一样,不过在做移动web的时候,它更有优势,并且非常好用,flex是css3中的属性,在移动web下我们不用考虑它 ...
[Tyvj Jan]青蛙跳荷叶
题目限制时间限制内存限制评测方式题目来源 1000ms 131072KiB 标准比较器 Local 题目描述从前,有一个小青蛙决定去荷叶上练习跳跃. 现在有n个荷叶排成一排,小青蛙一开始在最 ...
NOIP 2013 提高组初赛青蛙跳荷叶
现有一只青蛙,初始时在 n 号荷叶上.当它某一时刻在 k 号荷叶上时,下一时刻将等概率地随机跳到 1, 2, -, k 号荷叶之一上,直至跳到 1 号荷叶为止.当 n = 2 时,平均一共跳 2 ...
数学难题html5小游戏答案,数学难题大全及答案
今天上午,我正在为数学作文而烦恼,在网上闲逛,希望能碰到些启发,突然百度知道上一篇文章吸引了我."八路实验小学五(1)班徐瑞祥--"他这篇文章的问题是怎样准确算出一次性筷子的体积, ...
数学难题html5小游戏答案,小学数学难题讲解及答案
第一讲速算与巧算例1 计算9+99+999+9999+99999 解:在涉及所有数字都是9的计算中,常使用凑整法.例如将999化成1000-1去计算.这是小学数学中常用的一种技巧. 9+99+999 ...

flex froggy 青蛙跳荷叶的小游戏答案

flex froggy 青蛙跳荷叶的小游戏答案相关推荐

最新文章

热门文章