Flex Box 冒险小游戏

游戏网址：https://codingfantasy.com/games/flexboxadventure

---

第一关

首先，英雄亚瑟要吃个苹果补充体力

 代码：justify-content:center(沿主轴居中对齐)

 OK，吃到苹果喽，第一关over!

---

第二关

亚瑟吃完苹果还不行

还想再啃个胡萝卜

代码：justify-content:flex-end(沿主轴末端对齐)

 咱也是吃到胡萝卜喽，第二关，over!

---

第三关

这时候，亚瑟碰到了他的朋友玛丽莲

他俩都需要吃点东西来恢复体力

 代码：justify-content:space-between

(由远到近分别是space-between

space-around

space-evenly)

 第三关，over!

---

第四关

体力还是不够怎么办？

继续吃就完了呗!

 代码：justify-content：space-around

 第四关,over!

---

第五关

最后的晚餐

 代码：justify-content：space-evenly

 第五关，over!

---

前五关小结：主要是介绍了justify-content的用法

详解如图：

---

 第六关

吃饱喝足

找到新伙伴，准备打小怪兽喽

 代码：align-items:center(沿交叉轴对齐)

 第六关，over！

---

第七关

打完蚊子再斩蛇，杀杀杀

代码：align-items:flex-end

​​​​​​第七关，over!

---

六 七关小结

介绍了align-items的用法

详解如图

---

第八关

砍蜘蛛，这关同时用到了justify-content和align-items

 代码:align-items:center；

justify-content：center；

第八关，over!

---

 第九关

打哥布林

 代码:align-items:flex-end;

justify-content:space-between

 第九关，over！

---

八 九关小结

练习了align-items和justify-content结合的用法

---

第十关

来到了第一个boss的领地

 代码：flex-direction:column

 

 第十关，over！

---

第十一关

继续战斗吧

 代码：flex-direction:row-reverse

 第十一关，over!

---

十 十一关小结

介绍了flex-direction的用法

详解如图

 

 

---

第十二关

最后的小兵

代码：

flex-direction:column;

justify-content:flex-end 

(当将方向设置为反转的行或列时，开始和结束也会反转)

 第十二关，over！

---

第十三关

第一个boss，牛头人普鲁图斯

代码:flex-direction:row-reverse;

justify-content:center;

align-items:center

 

 第十三关，over!

---

十二 十三关小结

justify-content

align-items

flex-direction

综合运用

---

第十四关

打完怪兽又饿了

亚瑟该吃肉喽

 代码：order：2(次序换到第二个)

第十四关，over!

---

 第十五关

解锁新地图，女巫打骷髅兵

 代码：align-self:center；

第十五关，over!

---

 第十六关

小忍者打鬼魂

 代码：order:1;

align-self:flex-end;

第十六关，over!

---

 十四 十五 十六关小结

介绍了order和align-self的用法

详解如图

 

 

---

第十七关

第二个boss，泽鲁斯登场

 代码:flex-direction:column-reverse;

justify-content:flex-end;

align-items:center;

 第十七关，over！

---

第十八关

可恶的泽鲁斯血条很厚

这次让亚瑟来给他最后一击吧

代码:order:2;

align-self:center

 

 第十八关，over！

---

十七 十八关小结

温故知新，还是复习上面学过的代码的综合应用

---

第十九关

打完boss爆金币喽

 代码:

flex-wrap:wrap；

第十九关，over！

---

 第二十关

继续收金币

 代码：align-content:center;

 第二十关，over！

---

第二十一关

最后的金币收集

 代码：align-content:flex-end;

justify-content:center;

---

 十九 二十 二十一关小结

学习了flex-wrap和align-content的用法

详解如图

  

 

 

---

第二十二关

最终boss 黑骑士克洛诺斯

 代码：flex-direction:column-reverse;

justify-content:space-around;

align-items:flex-end

 第二十二关，over！

---

第二十三关(最难的一关)

打怪兽顺便收金币

代码： flex-direction:column-reverse;

justify-content:center;

flex-wrap:wrap-reverse;

align-content:center;

 第二十三关，over！

---

第二十四关

boss残血，让亚瑟给他最后一击吧

代码: order:3;

align-self:center;

最后一关，over!

放烟花庆祝🎉 

 

附录

参考文章

http://t.csdnimg.cn/W0H6L