CSS闯关小游戏

1、Flexbox Defense

这是一款练习flex-box的游戏，主要用到justify-content，align-items，flex-direction，order，align-self几个属性，总共12关。

游戏地址：http://www.flexboxdefense.com

代码库：https://github.com/channingallen/tower-defense

2、Flexbox Froggy

这也是一款涉及Flexbox的游戏，它涵盖的flex属性更多：align-items、justify-content、align-content、flex-direction、align-self、flex-wrap和flex-flow，游戏总共有24关。

游戏地址：https://flexboxfroggy.com

代码库：https://github.com/thomaspark/flexboxfroggy

3、GRID GARDEN

这款游戏总共有28关，你可以从中学习CSS网格布局。它涵盖了以下网格属性：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、order、grid-template-columns、grid-template-rows以及grid-template。

游戏地址：https://cssgridgarden.com

代码库：https://github.com/thomaspark/gridgarden

4、CSS Diner

这是一款有关各种CSS选择器的小游戏，总共有32关。

游戏地址：http://flukeout.github.io

代码库：https://github.com/flukeout/css-diner