我必須承認，我很難記住事情。尤其是當涉及到 CSS 時。例如 Flexbox 佈局。 Flex 容器的justify-content屬性可以有超過12 個不同的值，其中許多值可以與關鍵字safe或unsafe組合。要閱讀CSS Tricks 上的 Flexbox 完整指南，您必須滾動瀏覽高度超過 20k 像素的兩列頁面 - 儘管標題暗示了這一點，但它們並沒有涵蓋所有內容。
我最近偶然發現了一款塔防遊戲教學 Flexbox，這真的...
等等，什麼？
是的，事實證明，有很多遊戲可以幫助教授 CSS。我收集了一些對我有用的免費 CSS 遊戲，也許可以幫助您再次享受 CSS 的樂趣！
1.Flexbox防禦
我剛剛提到了這個遊戲。它涵蓋了 12 個不同等級的 Flex 屬性align-items 、 justify-content 、 flex-direction 、 align-self和order 。尤其是最後 4 個關卡真的很有趣，而且有點棘手。
-
Flexbox 青蛙
這個遊戲也是關於Flexbox的，它涵蓋了更多的flex屬性： align-items ， justify-content ， align-content ， flex-direction ， align-self ， flex-wrap ， flex-flow和order在24個不同的級別。如果您解決了最後一關，請發表評論。
3.網格花園
在 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 。
-
CSS 餐廳
這是一個關於各種CSS 選擇器的小遊戲。嘗試掌握所有 32 個級別，稱自己為 CSS 選擇器專家 - 並且很餓😋。
5.展開
這並不完全是一個遊戲，而是一個關於CSS 3D 變換的互動式演示。你可能會認為這很無聊，但相信我：動畫很棒，你不會認為這用純 CSS 是不可能的。
-
路線圖
解決這個僅用 CSS 和 HTML 製作的小遊戲需要技巧和速度。它不是直接教CSS，而是透過查看原始碼教授了很多關於clip-path 、 transform和animation with @keyframes的內容！
請發表評論，你需要嘗試多少次才能獲勝 - 我需要 8 次！ 😅
-
嘉年華
你只有 8 秒的時間來擊中所有目標！一個不錯的 CSS 小遊戲，使用複選框和 CSS 動畫。
-
井字遊戲
最後成為經典。 Tic-Tac-Toe 是純 CSS 遊戲，有 2 個難度級別，也使用複選框和 CSS 動畫。
獎金
這是獎勵部分，其中包含評論中的建議：
9. Flexbox 殭屍
這是一個故事情節驅動的訓練課程，您可以在其中學習使用 Flexbox 和弩來獵殺殭屍。需要註冊。
-
價格：179 美元（但在撰寫本文時免費）
-
創作者：戴夫·格迪斯
10. 服務工程
在這次冒險中，您將學習如何避免 PWA 陷阱。您將提升您的技能並與 Service Workers 一起成長。也許甚至可以殺死幾個世紀以來困擾貧窮鄉村工人的野蠻野獸！需要註冊。
-
價格：179 美元（但在撰寫本文時免費）
-
創作者：戴夫·格迪斯
11. 網格小動物
您掌握 CSS Grid 的旅程從神秘的 Grideros 星球開始。你的任務是使用你的飛船強大的網格工具來拯救外星生物免於滅絕。需要註冊。
-
價格：179 美元
-
創作者：戴夫·格迪斯
12.CSS戰鬥
在這款線上 CSS 程式碼高爾夫遊戲中，來自世界各地的玩家嘗試用盡可能小的 CSS 程式碼直觀地複製“目標”，並通過戰鬥力爭登上排行榜的榜首。
把它包起來
無論您是初學者還是專家，都沒關係 - 我希望您在玩遊戲時玩得開心，同時學習一些有關 CSS 的知識！特別是在 Codepen 上，您可以找到許多人們僅使用 HTML 和 CSS 建立的精彩遊戲。
如果您知道其他很棒的 CSS 學習遊戲，請在下面的評論中告訴大家。
編輯：2021 年 7 月 2 日（修復 Flexbox 殭屍連結，加入 cssbattle）
編輯：2019 年 10 月 29 日（加入 Dave Geddes 在評論中推薦的 3 個獎勵遊戲）
編輯：2019 年 10 月 28 日（從錯誤的 Flexbox 範例justify-items切換到justify-content ）
原文發佈於：2019 年 10 月 24 日， Medium
原文出處：https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式