頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

一個學flex布局的游戲FlexboxFroggy

布局 HTML我幫您 1年前  次瀏覽

FlexboxFroggy一個學flex布局的游戲, 它把學習代碼變成了一種樂趣,學習flex布局可以跟玩一樣,我親自體驗了一下,比起單純的去學習flex的枯燥,這個確實更有趣。

一個學flex布局的游戲FlexboxFroggy


Flexbox Froggy

歡迎來到Flexbox Froggy。在游戲中你會靠寫CSS代碼來幫助青蛙和他的朋友們!請用justify-content屬性指引青蛙到右邊的荷葉上。這個屬性可以水平對齊元素,并且接受以下幾個參數:

  • flex-start: 元素和容器的左端對齊。
  • flex-end: 元素和容器的右端對齊。
  • center: 元素在容器里居中。
  • space-between:元素之間保持相等的距離。
  • space-around:元素周圍保持相等的距離。

舉個例子,justify-content: flex-end;會將青蛙移到右邊



相關鏈接

發表評論

经典黑杰克游戏