今天发现了一篇牛掰的文章(https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f),讲述了12款学习CSS的游戏,真可谓是玩着游戏就把前端CSS知识点学废了,是不是很激动,有种跃跃欲试的感觉?由于游戏太多,我没有一一进行通关,下面讲述自己通关的那款游戏——Flexbox Defense(http://www.flexboxdefense.com/)。
欢迎和号主【前端点线面】进群盘算法,此外本号干货满满:14个门类(100+篇原创)内容(又干又硬)、《前端百题斩》pdf(助力薪资double)、20+篇思维导图(知识系统化、记忆简单化),进摸鱼群。
一、基础知识
这是一款塔防类游戏,有点像保卫萝卜,该款游戏共12个关卡,为了通关需要了解Flex布局的一些知识,下面就来简单科普一下需要用到的小知识点【注:本文仅科普需要用到的知识点,更加详细的可看官方文档】。
1.1 justify-conent
justify-content
属性定义了项目在主轴上的对齐方式。
flex-start
(默认值):左对齐flex-end
:右对齐center
:居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
1.2 align-items
align-items
属性定义项目在交叉轴上如何对齐。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
1.3 flex-direction
flex-direction
属性决定主轴的方向(即项目的排列方向)
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
1.4 order
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
1.5 align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
二、游戏攻略
基础知识已经储备完毕,下面就靠这些三板斧进行通关操作了,一言不合就是砍。
2.1 关卡1
用justify-content就可以解决。
![17bfc2383ef11dcbb47d7a82f0245fd0.png](https://i-blog.csdnimg.cn/blog_migrate/6717e79b43c9186debe4e24294089e1c.png)
2.2 关卡2
用justify-content就可以解决。
![287952c92a303ab8664fe2b4c41f72a2.png](https://i-blog.csdnimg.cn/blog_migrate/e473a1e1134a8d84d29baa399621de06.png)
2.3 关卡3
用justify-content就可以解决。
![7842ad4f61ca0682047df378f6c952ed.png](https://i-blog.csdnimg.cn/blog_migrate/01f83392d267c003b383f4b567e4e497.png)
2.4 关卡4
用align-items就可以解决。
![cbbe693b19131df24af9cc87e17d6703.png](https://i-blog.csdnimg.cn/blog_migrate/7c05acc392a7645ffdb7502efe4570c5.png)
2.5 关卡5
用justify-content、align-items就可以解决。
![a7efd418255a068c066bb5618d8efd13.png](https://i-blog.csdnimg.cn/blog_migrate/cd5dc685ce7c666df582c072885fa347.png)
2.6 关卡6
用justify-content、align-items就可以解决。
![a96ed664e88773046aa11794c7f1cf75.png](https://i-blog.csdnimg.cn/blog_migrate/2d6522e284311228efd412eaf0799101.png)
2.7 关卡7
用flex-direction就可以解决。
![342d9a4bd9f619d355cb79a034e2f110.png](https://i-blog.csdnimg.cn/blog_migrate/52f76aa05a19256a8bae53f3f1abfd66.png)
2.8 关卡8
用flex-direction、align-items就可以解决。
![7e5ff056bbc72ccaa52cdbaf4ce67825.png](https://i-blog.csdnimg.cn/blog_migrate/9569a39627d5fa1670833e713900484a.png)
2.9 关卡9
这个关卡增加了新的武器——散弹炮,这个位置千万要注意,此关卡用flex-direction、justify-content、align-items就可以解决。
![f9931c60971a0f82c58b73c2d7ef1cad.png](https://i-blog.csdnimg.cn/blog_migrate/bc1ab57b669a3d6dc8ab0d416233ec32.png)
2.10 关卡10
用justify-content、order就可以解决。
![e4b5d845840d64a10a2f52bd5999f724.png](https://i-blog.csdnimg.cn/blog_migrate/533d32837cc7e49f155cb1a28ad7f1cf.png)
2.11 关卡11
用justify-content、align-self就可以解决。
![9e35d7f7cc0ff46cd526438733c91ffb.png](https://i-blog.csdnimg.cn/blog_migrate/d6592a5e560cece293a3fe1da8cd43be.png)
2.12 关卡12
用flex-direction、justify-content、align-self、order就可以解决。
![7caba43517daa8670795ae49ceebc3f8.png](https://i-blog.csdnimg.cn/blog_migrate/289288345ae650855b1e0fd67968f699.png)
··············· 执鸢者简介 ·················
看号主详细信息,来这
畅所欲言交流群
【1】前端百题斩系列
【2】Vue系列
【3】React系列
【4】前端基础系列
【5】基础知识
【6】浏览器系列
【7】构建工具系列
【8】网络系列
【9】Node系列
【10】源码系列
【11】前端有意思
【12】手撕算法系列
【13】个人总结
【14】杂科