通过游戏来学习CSS的Flex布局

末蓝、 2022-03-15 09:48 231阅读 0赞

> 在复习Flex 布局的时候发现的了几个有趣的小游戏，在这里分享并记录几个有难度的答案

## 1. [Flexbox Froggy][] ##

通过调整CSS样式来使各种青蛙回到对应的荷叶上，游戏默认难度为`Beginner`会有提示，可以在下面的`settings`关闭提示，一共24关，感觉只有17和24有点疑惑，这里标记一下答案

### Flexbox Froggy 17关 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]

### Flexbox Froggy 24关![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 1]\#\# 2. [Flexbox Defense][] ###

这是一个塔防游戏，通过CSS布局来各个调整炮塔的位置，默认是调整`Flex container`(不了解什么是Flex container的可以参考[这里][Link 1])，`Flex item`选项是隐藏的，如果需要调整得先点击左侧的`hide tower inputs`调整完可以开始战斗，唯一的要求是炮塔 不能在轨道上，每一关的胜利条件不同，但是最好都可以达到满满分。自己除了最后一关，其他的都没太大难度.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 2]

[Flexbox Froggy]: http://flexboxfroggy.com/#zh-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]: /images/20220315/bb9504e1490e4d38b7f93b47a154132a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190301202935976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk=,size_16,color_FFFFFF,t_70
[Flexbox Defense]: http://www.flexboxdefense.com/
[Link 1]: https://blog.csdn.net/u011215669/article/details/87972430
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 2]: /images/20220315/b403fef184b14e6fa42ffc74e16d4f03.png