選擇 CSS 屬性前，先辨認主軸和交叉軸
先讀關卡目標，觀察青蛙和荷葉的位置。默認行方向下，justify-content 沿水平主軸分布項目，align-items 沿垂直交叉軸對齊項目。輸入值之前，先說清自己要改變哪條軸，避免給控制另一方向的屬性選了一個看似正確的值。
flex-direction 改為列方向後，主軸和交叉軸也隨之改變，不能繼續把 justify-content 理解為只控制水平位置。在編輯器里一次改一條 CSS，再比較青蛙與目標荷葉的位置。青蛙由 CSS 定位，不是拖動到位；練習應圍繞當前關卡提示和允許使用的屬性。
解釋上次為什麼沒對齊，再改一項
沒有達到目標時，先檢查屬性是否控制了錯誤的軸、屬性值是否與預期不同，或當前方向是否改變了佈局含義。保留已經理解的規則，只改一項。一次替換多個屬性可能碰巧成功，卻難以知道究竟是哪項修正起作用。
成功後，用一句話描述規則：使用哪條軸、怎樣把青蛙相對荷葉定位。後續關卡會組合概念，這種解釋比死記一行答案更有用。本中心幫助理解實際遇到的關卡，不編造完整答案表，也不把完成小遊戲當作專業 CSS 能力認證。
例如，本來想橫向移動，規則卻讓青蛙上下變化，就先檢查 flex-direction，重新辨認主軸，再選屬性值。說清屬性控制什麼、當前軸沿什麼方向，再修改一項並觀察。成功後，用畫面里的荷葉驗證解釋，讓一次錯誤猜測變成可重復使用的佈局知識。
Flexbox Froggy 技巧與策略
勾選下一局想練習的技巧。這份清單不會改變遊戲或儲存遊戲進度。
Flexbox Froggy 問題與答案
我需要安裝程式設計工具嗎？
不，CSS 編輯器在瀏覽器遊戲內部。
這是一個完整的網站開發課程嗎？
這是一個用於練習 Flexbox 佈局概念的互動式遊戲。它不能取代更全面的 HTML 和 CSS 課程。
這個專案是誰創建的？
Thomas Park 創建了 Flexbox Froggy。原始碼採用 MIT 許可，錄製的封面使用了 CC BY 3.0；署名連結如下。
反轉方向後，flex-end 為什麼把青蛙移向另一邊？
Flexbox 的起點和終點取決於目前主軸，並非固定的左邊和右邊。使用 row-reverse 時，主軸從右側開始，因此 justify-content: flex-end 會把元素移向左側。先檢查 flex-direction，再選擇對齊值；align-items 調整的是交叉軸，解決的是另一種位置問題。