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属性能水平对齐元素,并接受这些参数:
flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。
3.仅靠justify-content来帮助全部三只青蛙找到他们的荷叶。这次荷叶周边都有很多的空地。
如果你忘了一个CSS属性可选的值的话,你可以将鼠标移到参数名上面来查看。试试将鼠标移到justify-content。
4.现在边上的荷叶都漂到了岸
ppxgf: 作者你好,这个模板能使用判断条件之类的嘛
m0_64496286: 1是完全不透明,0是透明