flex布局——宝藏游戏FlexboxFroggy

最新推荐文章于 2024-03-20 09:50:58 发布
VIP文章 最新推荐文章于 2024-03-20 09:50:58 发布
阅读量2k 收藏 1
点赞数 2
文章标签： 游戏 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50467021/article/details/119575435
版权

最近我发现了一个宝藏游戏FlexboxFroggy，适合需要练习flex布局的小伙伴。
这个游戏大致规则就是利用flex布局里的属性，将青蛙移动到对应荷叶的位置就可以过关。
给大家示范一下
在这里插入图片描述

比如这个关卡，我们需要让同样颜色的青蛙和荷叶相对应，添加justify-content:space-around代码，视图变成这样
请添加图片描述
再添加align-items:flex-end,就可以过关

最低0.47元/天 解锁文章
我不会写JS
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flexbox Froggy 小青蛙跳荷叶源码答案
08-03
flex中有12个属性，除去一些融合缩写属性，属性值可谓五花八门，而且组合使用的话，还有很多注意点，建议大家可以玩下这个flexbox小青蛙的游戏，游戏几乎包含了所有的常用属性和属性值，形象且容易记忆。做出出来的同学可以看下里面的游戏答案
Flexbox Froggy
m0_53949141的博客
04-03 333
练习网址：Flexbox Froggy - A game for learning CSS flexbox 练习：
探索FlexboxFroggy：掌握CSS Flexbox布局的游戏化学习之旅
最新发布
gitblog_00047的博客
03-20 315
探索FlexboxFroggy：掌握CSS Flexbox布局的游戏化学习之旅 项目地址:https://gitcode.com/thomaspark/flexboxfroggy 项目简介 FlexboxFroggy 是一个开源的学习项目，旨在帮助开发者以游戏化的形式学习和熟悉CSS Flexbox布局。在这个游戏中，你的任务是通过编写正确的Flexbox样式，帮助小青蛙捕捉到所有的虫子。这种方式...
flexboxfroggy最后一关
丁七岁的博客
09-27 4422
flexboxfroggy的地址：http://flexboxfroggy.com/ ta考察的是flex布局 你发现青蛙都是横着的，但是荷叶是竖着的，所以方向给他变成竖着的，然后你会发现最下面的荷叶是红色的，要反转下（主轴的方向）。青蛙是一行，但是荷叶是2列，要设置换行，前面一列的那两个荷叶是黄色的，反转。黄色荷叶在中间，主轴设置center，弄完这些黄色的青蛙还没有到达指定的位置，再设置弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间（align-content）。 属性不清楚，看这个文档
CSS Flexbox 青蛙游戏
前端开发博客
11-01 3097
关注前端开发博客，回复“加群”加入我们一起学习，天天进步导语在学习CSS中，Flexbox是一个比较实用的CSS 布局属性，但很复杂，有些人可能没法很快掌握，今天我要推荐一个跟这个相关...
css flexbox模型_通过Flexbox Froggy游戏自学CSS Flexbox
cune1359的博客
06-30 411
过去，我们只介绍了flexbox及其工作原理。 但是实际上将flexbox应用于您的工作流程可能会遇到挑战，因为这是CSS规范中如此复杂的补充。 另请阅读： 6个CSS技巧以垂直对齐内容 使用Flexbox Froggy，您可以通过有趣的涉及青蛙和lilypads的网络游戏来学习 flexbox的 所有基础知识 。 我知道这听起来很疯狂，但这确实是一个很棒的Web应用程序。 您...
flexboxfroggy：学习CSS flexbox的游戏:frog:
02-05
Flexbox Froggy Flexbox Froggy是一款用于学习CSS flexbox的游戏。 在检查。 阅读以了解该项目的背景。 作者 托马斯公园 译者 我感谢这些贡献者对Flexbox Froggy进行了本地化。 这就是开源的全部意义。 阿拉伯语 波斯尼亚人 保加利亚语，作者： 加泰罗尼亚语（ 简体中文 中国传统by 丹麦文，（ 荷兰人 捷克文（ 世界语， 爱沙尼亚语由 （ 波斯语 芬兰语， 法语由 德国人 希腊文 希伯来语，作者： 印地语，作者： 匈牙利人（ 印尼语由 意大利语 日语 韩文（ 拉脱维亚人 立陶宛人 马其顿人 马拉
通过游戏来学习CSS的Flex布局
YooHoeh的博客
03-01 422
在复习Flex 布局的时候发现的了几个有趣的小游戏，在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上，游戏默认难度为Beginner会有提示，可以在下面的settings关闭提示，一共24关，感觉只有17和24有点疑惑，这里标记一下答案 Flexbox Froggy 17关 Flexbox Froggy 24关## 2. ...
玩游戏 学Flex布局
weixin_33725270的博客
01-14 140
大家好，今天推荐一个学习Flex布局的网页小游戏，非常不错，是国外的牛人开发的，值得一试，重复几次，就会大概了解Flex的属性了！ 地址： http://flexboxfroggy.com/#zh-cn 文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！ 转载于:https://www.cnblogs.com/Y1473/p/10269345.html...
Flexbox Froggy通关代码
weixin_46434107的博客
11-03 2292
通关代码在下面 第一关 justify-content: flex-end; 第二关 justify-content: center; 第三关 justify-content:space-around; 第四关 justify-content:space-between; 第五关 align-items:flex-end; 第六关 justify-content:center; align-items:center; 第七关 justify-content:space-around; alig.
flex box froggy
uaena的博客
01-23 159
游戏地址：Flexbox Froggy - A game for learning CSS flexbox
Flexbox-Froggy-19d16e0e
04-14
Flexbox-Froggy-19d16e0e
Flexbox---Froggy
03-13
Flexbox---Froggy
flexbox实例
05-08
flexbox实例、
深入理解Flex布局以及计算
02-25
对于Flex布局，阅读了大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox的W3C规范文档。注：本篇博文不适合未接触过Flex...
Flex布局基础知识
01-08
Flex布局 今天在学习css的时候，学到了一个新的布局方式:Flex布局（弹性盒布局）。本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。 ...
flex布局项目——携程在线首页（原生轮播图效果）.zip
04-16
携程在线首页。适合零基础入门的人使用的demo，对布局这块有不错的...采用的是flex布局使用了原生js实现的tab栏切换等。自己可以通过swiper插件或者TouchSlide插件以及bootstrap框架来替换！可以把这个demo进行更改。
flex布局分享.pptx
11-06
flex布局培训PPT，适用于H5,小程序，ReactNative,Flutter的布局教程。
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
flex布局——最后一行左对齐的实现方式
05-12
要实现最后一行左对齐的效果，可以使用 Flex 布局中的 `justify-content` 和 `flex-wrap` 属性。 首先，将容器设置为 Flex 布局： ```css .container { display: flex; flex-wrap: wrap; } ``` 接着，设置 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值