flex froggy 青蛙跳荷叶的小游戏答案
最新推荐文章于 2024-08-31 07:07:56 发布
fay_ren
最新推荐文章于 2024-08-31 07:07:56 发布
阅读量2.6k
收藏
17
点赞数
2
本文通过介绍Flexbox Froggy小游戏，详细讲解了CSS flex布局中的justify-content、align-items、flex-direction、order和align-self等属性的用法，帮助前端初学者更好地理解和应用flex布局。
想必大家在学习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属性能水平对齐元素，并接受这些参数：
flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。
3.仅靠justify-content来帮助全部三只青蛙找到他们的荷叶。这次荷叶周边都有很多的空地。
如果你忘了一个CSS属性可选的值的话，你可以将鼠标移到参数名上面来查看。试试将鼠标移到justify-content。
4.现在边上的荷叶都漂到了岸
最低0.47元/天 解锁文章
扫一扫
4374
暂无认证
到【灌水乐园】发言
ppxgf: 作者你好，这个模板能使用判断条件之类的嘛
m0_64496286: 1是完全不透明，0是透明