CSS Flexbox 青蛙游戲

導(dǎo)語

在學(xué)習(xí)CSS中，F(xiàn)lexbox是一個比較實用的CSS 布局屬性，但很復(fù)雜，有些人可能沒法很快掌握，今天我要推薦一個跟這個相關(guān)的游戲，在游戲中學(xué)習(xí)Flexbox，這豈不是一個讓人覺得很快樂的事嗎？

游戲介紹

來看一下作者對這個游戲的具體介紹吧。

我制作了一個學(xué)習(xí)CSS Flexbox的游戲，叫Flexbox Froggy。游戲的目標(biāo)是通過編寫CSS代碼來幫助青蛙到達(dá)他們的百葉窗。看看你是否能打敗所有的關(guān)卡！

Flexbox Froggy的靈感來自于經(jīng)典街機游戲Frogger，以及網(wǎng)絡(luò)掃盲游戲，比如出色的CSS Diner和Erase All Kittens，你可以分別學(xué)習(xí)CSS選擇器和HTML標(biāo)記。

我之所以選擇CSS flexbox，部分原因是它的布局屬性使得游戲機制很好。游戲關(guān)卡類似于我在Mozilla Thimble教程中特色的 "定位僵尸 "活動，但使用了強大的新flexbox模型而不是絕對定位。

Flexbox也是一個很好的話題，因為初學(xué)者可以直接學(xué)習(xí)這種改進(jìn)的定位方式，而很多有經(jīng)驗的Web開發(fā)者還不熟悉它，終于可以上手了。這也是我自己有段時間一直想學(xué)的東西。像CSS Tricks、Codrops和Scotch.io的教程都是頂級的，但很少有交互式的學(xué)習(xí)體驗。

試玩感受

作者從一個簡單的青蛙位置跳到對應(yīng)的荷葉上，根據(jù)對應(yīng)的屬性設(shè)計不同的排版，從而達(dá)到學(xué)習(xí)Flexbox的目的，這簡直太棒了。下面我簡單截取一些屬性截圖。

justify-content:flex-end

justify-content:center

justify-content:space-around

align-items:flex-end

還有屬性結(jié)合的布局

其它不一一列舉了，還是挺有趣的，喜歡可以去看看哈

關(guān)注數(shù)：10億+?文章數(shù)：10億+
粉絲量：10億+?點擊量：10億+
?

懸賞博主專區(qū)請掃描這里

喜愛數(shù)：?1億+?發(fā)帖數(shù)：?1億+
回帖數(shù)：?1億+?結(jié)貼率：?99.9%

—————END—————

喜歡本文的朋友，歡迎關(guān)注公眾號?程序員哆啦A夢，收看更多精彩內(nèi)容

點個[在看]，是對小達(dá)最大的支持！

如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~