十一款遊戲教你學會 CSS！

關注 “”

網上有很多有助於學習CSS的遊戲，本文收集了一些非常實用的免費CSS遊戲，希望這些遊戲可以幫助你再次體驗CSS的樂趣！

作者 | Andreas Müller

譯者 | 彎月，責編 | 郭芮

以下爲譯文：

我必須承認，我的記性不是很好。特別是我記不住CSS，例如Flexbox佈局等。flex容器的屬性justify-content可以有12種以上的不同值，其中許多可以與關鍵字safe或unsafe組合。詳細說明可以參照這篇文章《CSS技巧：flexbox的完整指南》（https://css-tricks.com/snippets/css/a-guide-to-flexbox/），這個頁面只有兩列，高度卻超過了2萬像素，雖然文章題目表明這是一篇完整的指南，但實際上文中並沒有覆蓋到所有內容。

最近，我在偶然間發現了一款塔防式的flexbox教學遊戲，這款遊戲真的是……

等等，你說什麼？

你沒聽錯，事實證明，網上的確有很多有助於學習CSS的遊戲。我收集了一些非常實用的免費CSS遊戲，希望這些遊戲也可以幫助你再次體驗CSS的樂趣！

Flexbox Defense

上述我提到的就是這款遊戲。它涵蓋了flex的屬性align-items、justify-content、flex-direction、align-self和order，遊戲本身總共有12關。特別是最後4關非常有趣，而且難度也很高。

遊戲地址：http://www.flexboxdefense.com

代碼庫：https://github.com/channingallen/tower-defense

作者：Channing Allen

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

作者：Codepip

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

作者：Codepip

CSS Diner

這是一款有關各種CSS選擇器的小遊戲，總共有32關，打通關後你就可以自詡爲CSS選擇器專家了，而且你會越玩越餓。

遊戲地址：http://flukeout.github.io

代碼庫：https://github.com/flukeout/css-diner

作者：Luke Pacholski

Unfold

這不完全是一款遊戲，更像是一個有關CSS 3D變換的交互式演示。你可能會覺得無聊，但請相信我，遊戲裏面的動畫非常燃，而且你肯定會覺得純CSS不可能做出這樣的效果。

遊戲地址：https://rupl.github.io/unfold

代碼庫：https://github.com/rupl/unfold