透過遊戲學習 CSS：Flexbox Froggy 和 Grid Garden

首先使用 Flexbox Froggy 練習沿著座標軸對齊，然後使用 Grid Garden 練習在網格線之間放置元素。完成每個遊戲練習後，在你自己的小頁面上重現這個想法。一個有用的成果是能夠解釋為什麼在佈局變更時某個聲明仍然有效，而不是僅僅記住某個關卡的答案。

如何透過遊戲學習 CSS 並將其應用

此課程結合了兩個遊戲和三個原創練習。它適合能夠閱讀簡單 CSS 規則並希望獲得直覺回饋的人。這並非完整的 Web 開發課程：實際的介面還需要可讀的內容、響應式設計、鍵盤存取以及針對不同文字量的測試。

選擇與您的問題相關的練習

這些遊戲由 Codepip 開發。 Cozcade 將每個託管遊戲連結到其對應的指南：Flexbox Froggy 及其指南；Grid Garden 及其指南。原始的 Froggy 和 Grid Garden 頁面提供了作者自己的版本。請在此處使用鍵盤進行程式碼練習。

選擇屬性前，先分清主軸與交叉軸

Flexbox 具有主軸和交叉軸。 flex-direction 設定主方向；justify-content 將元素沿主軸定位，而 align-items 則與交叉軸相關。在普通的從左到右的行中，主軸是水平的。將方向變更為列，主軸則變為垂直。這些定義在 MDN 的 Flexbox 簡介 中有詳細介紹。

在 Froggy 中嘗試聲明之前，請先指定元素的移動方向。然後，根據當前主軸為該方向命名。這樣可以將錯誤的答案轉換為一個具體的問題：您是否選擇了錯誤的屬性、錯誤的值或錯誤的軸？

練習 1：將一組元素移到最後

在一個容器內建立三個小元素。這是一個原創練習，並非複製遊戲關卡或答案。

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

你的目標是將這三個元素一起移向右側，同時保持順序不變，也不分別為元素設定外邊距。先預測結果，再將 justify-content: flex-end 加到容器中。

現在將其與 justify-content: space-between 進行比較。第一個選項移動了這組元素；第二個選項則在元素之間分配了可用空間。嘗試使用窄容器和寬容器。解釋一下，對於三個需要保持緊密排列的按鈕，你會選擇哪個版本。最終的視覺效果比記住一個數值更重要。

練習 2：保持指令不變，改變座標軸

重複使用此容器，新增 flex-direction: column，設定 height: 12rem，並保留 justify-content: flex-end。現在，這些項目聚集在底部。您的聲明並沒有變成“向右移動”命令：它仍然沿著您更改的主軸生效。

接下來，新增 align-items: flex-start。比較添加前後的排列。按照指定的從左到右方向，項目沿著交叉軸向左對齊。移除該聲明，再次觀察預設的拉伸行為。

請簡要解釋這兩個更改，不要使用「它就生效了」這樣的表述。例如，指出座標軸、空白區域以及正在定位的群組。如果您無法解釋結果，請將範例簡化為兩個項目，並一次只更改一個聲明。這是遊戲中需要養成的習慣。

接下來，區分網格軌道和邊界。

Grid 透過列與欄兩側的網格線定位元素。五欄顯式網格共有六條欄網格線。從第 3 條欄網格線放到第 5 條，元素會跨越兩欄，而不是三欄。網格軌道、儲存格與網格線的差別可參閱 MDN 的 Grid 入門說明。

在 Grid Garden 中，先確定起始與結束網格線，再嘗試放置元素。如果容易把網格線與中間的空格混淆，可以在自己的頁面上畫出或標註這些邊界。

練習 3：將卡片放在兩條網格線之間

創建一個五列的棋盤，並在上面放置一張卡片：

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

在打開頁面之前預測卡片會出現在哪裡。然後，僅透過改變卡片的列位置，使其佔據整個棋盤。在上面的五欄顯式網格中，grid-column: 1 / 6 會從第一條網格線延伸到最後一條。

最後，將文字變更為更長的句子，並縮小瀏覽器視窗。放置規則可能仍然正確，但卡片的固定高度顯示方式不再適合其內容。解決遊戲練習可以學習佈局的一部分；建立一個可用的頁面還需要檢查內容。

將遊戲進度當作回饋，而不是掌握的證明。

成功完成練習後，更改一個假設：方向、項目數量、可用寬度或文字長度。在查看結果之前先預測結果。如果你能靈活運用思路並解釋變化，那麼你學到的就不僅僅是簡單的答案了。

返回遊戲時，請確保開啟的是相同版本和瀏覽器環境。 Cozcade 帳號收藏夾用於標記你想重玩的遊戲；但這並不保證遊戲內部的學習進度會在不同裝置間同步。在查看進度時，請避免刪除已儲存的網站數據，並且僅在特定遊戲提供匯出功能時才使用。

繼續查看對應遊戲的攻略

使用Froggy 指南進行軸線和對齊練習，使用Grid Garden 指南進行定位題練習。如果之後你想進行其他類型的練習，請瀏覽學習遊戲。

以上練習是為本文而寫的。參考頁已於2026年10月11日審核。我們記錄的遊戲測試僅涵蓋少量桌面交互，並非所有關卡的完成或完整的行動裝置課程。本文教授一套練習流程；它不授予任何資格證書，也不能取代您自行測試介面。

您可以在 Cozcade 上玩的遊戲

Flexbox FroggyGrid Garden