# CSS 各種小遊戲 (css選擇器, flex, grid)

## CSS Diner (CSS selector)
專注在選擇器的介紹，很推薦玩一次看看到底有哪些選擇器
https://flukeout.github.io/
[](https://flukeout.github.io/)

可以搭配其他教學 (非遊戲)
### 30個你必須記住的CSS選擇器
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048

### CSS 專家密技
https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW

## Flex
支援度：https://caniuse.com/#search=flex
教學：http://www.oxxostudio.tw/articles/201501/css-flexbox.html
### flexbox froggy (有多國語言含中文)
介紹各種flex屬性，最後一關難度會暴增，讓你把前面每一招混合起來融會貫通用的
http://flexboxfroggy.com/#zh-tw
[](http://flexboxfroggy.com/#zh-tw)

### Flexbox Defense
跟 froggy類似，不過是塔防型態，遊戲樂趣看起來比較高
http://www.flexboxdefense.com
[](http://www.flexboxdefense.com/)

### Flex Pirate 擊倒海盜 (六角學院)
六角學院出品有品質保證，遊戲性也很高，排行榜模式是特色
https://w3c.hexschool.com/flexbox/cc1c1b71
[](https://w3c.hexschool.com/flexbox/cc1c1b71)

### flexbox-zombies (只有英文)
關卡數非常多，進展曲線也比較慢，玩的時間可以拉蠻長的
https://mastery.games/p/flexbox-zombies
[](https://mastery.games/p/flexbox-zombies)

## Grid

支援度：https://caniuse.com/#search=grid
教學：https://blog.techbridge.cc/2017/02/03/css-grid-intro/

### Grid Garden
跟flexbox froggy類似，就不做太多解說了
http://cssgridgarden.com/#zh-tw
[](http://cssgridgarden.com/#zh-tw)

###### tags: `前端`