YORIMICHI PLAYLIST
玩法指南
操作方式與目標
- 操作方法
- 在程式碼輸入欄位中輸入 CSS 屬性和值。 一旦放置正確，“下一步”將被啟用。
- 目標
- 寫出 CSS 屬性和值，將彩色青蛙放在相同顏色的荷葉上，並前進通過所有 24 個等級。
關於這款遊戲
編寫程式碼，
目視檢查佈置。
「Flexbox Froggy」是一款由 Thomas Park 創作的 CSS Flexbox 學習遊戲。 每個關卡都顯示了青蛙和荷葉在池塘中的位置。 在程式碼欄位中輸入指定的 CSS 屬性，並將青蛙放在相同顏色的葉子上以進入下一層。
書寫、移動、匹配
寫 justify-content，
把青蛙帶到右邊的葉子上。
等級 1 處理 justify-content，它決定水平對齊方式。 日文官方解釋顯示了flex-start、flex-end、center、space- Between、space-around，當輸入flex-end時，青蛙移動到池塘的右側。
實玩攝影：Detour Playlist 編輯部/製作：Thomas Park/圖片：CC BY 3.0
CSS 輸入直接反映到池塘位置
在代碼欄位中輸入的內容將反映在右側池塘中元素的排列中。 作者的製作文章解釋說，這項工作的目標是編寫CSS程式碼將青蛙運送到荷葉上。
24個等級處理flexbox的主要屬性
官方原始碼包含24個關卡。 從justify-content開始，屬性將增加到align-items、flex-direction、order、align-self、flex-wrap、flex-flow和align-content。
日語顯示和三個難度等級可供選擇
官網版支援日文顯示。 在設定中，您可以選擇“初級（帶說明）”、“中級（無說明）”和“專家”（刪除說明並更改級別順序）。您也可以切換顯示以考慮色覺多樣性。
遊玩說明
遊玩補充說明
- 規模/難度
- 共有24個級別，您可以選擇初級（含說明）、中級（不含說明）和專家（更改級別順序不帶說明）。 沒有固定的時間估計
- 語言/支援的環境
- 支援日語、英語等多種語言。 適用於支援 HTML5、CSS 和 JavaScript 的瀏覽器，以及可以使用鍵盤進行 CSS 輸入的環境。
- 費用/節省
- 官網版免費，不需帳號。 將目前等級、輸入的答案、已解決的等級和顯示設定儲存到瀏覽器的 localStorage。
寫一行CSS，
把青蛙帶到樹葉上。
官方網頁版本、作者製作文章和官方儲存庫已於2026年7月25日確認。 兩張圖片是編輯部使用官方獨立日文版本拍攝的遊戲內畫面。 資訊來源：Flexbox Froggy 官方網頁版（日文）、托馬斯·帕克製作的文章、Flexbox Froggy 官方儲存庫、Flexbox Froggy 代碼的 MIT 許可證 Flexbox Froggy 影像的、CC BY 3.0 表示法、知識共享歸屬3.0
實況資訊
關於實況與影片投稿
官方儲存庫在 MIT 許可下發布程式碼，並在 CC BY 3.0 下發布圖像。 在處理遊戲圖像進行分發、視頻發布或貨幣化時，請顯示作品標題、Thomas Park、官方 URL 和 CC BY 3.0 鏈接，並遵守每個許可的條款。 請不要在頁面底部顯示第三方廣告或連結資料，因為它們不符合資格。 無法確認專用交付指南。
讀者留言
《Flexbox Froggy》的留言
分享遊玩感想，或告訴其他讀者這款遊戲值得推薦的地方。
所有語言版本共用留言，內容以原文顯示，不會自動翻譯。
正在載入留言…