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