Learning ! 美好人生

你還在被FlexBox搞得昏頭轉向的嗎? 這些CSS指令快把你搞瘋了嗎? 跟大家分享一個超棒，全中文的小遊戲，來到這裏幫可愛的小蛙兒，一步一步幫牠引導到荷葉上，我們也能藉由這個小遊戲學到如何使用屬性在網頁上定位的coding。透過這個超級有趣的小遊戲 "FLEX BOX FROGGY"，聰明的你相信很快就能掌握到 FlexBox css 該如何運用的絕妙訣竅嚕!! 廢話不囉嗦!快快來看看這能增加功力的好遊戲吧。 http://flexboxfroggy.com/#zh-tw 在遊戲中你會靠寫CSS代碼來幫助青蛙和他的朋友們！請用justify-content、align-items、flex-direction、order、align-self、flex-wrap、flex-flow、align-content…等屬性指引小青蛙們到對應的荷葉上。 為了提醒玩家們，還有隱藏式下拉 CSS 代碼告訴你可以貼上什麼值讓小蛙兒們找到適當的荷葉，真的是非常的貼心 藉由遊戲送小蛙兒回家的過程，除了幫助初學者建立 Flexbox 所需要的邏輯觀念，同時也能加強 Flexbox 排版中重要的語法指令並且交叉運用，開心玩遊戲之餘還可以動動腦，是不是很棒呢?

網頁佈局是設計風格完成之後發表到網路上的基本動作之一，這系列文章主要是介紹  CSS Grid  的用法，是我自己對於學習CSS Grid的紀錄，其實網路上已經有許多介紹關於  CSS Grid  的資源，相信在   CSS Grid  規範出現之後，我們就不必再依賴   Float 來製作網頁佈局了。 ★  Grid 是什麼？ ★  “Grid” 是一組交錯的水平和垂直線，元素內容可以放置在 Grid 裏。 CSS 網格佈局具有以下特點： 1)       固定與靈活控制留白的大小 2)       更精準的定位 item 的位置 3)       更自由的控制對齊方式 4)       靈活運用重疊的區域 Grid 強大的規範，讓我們設計 Layout 時更加得心應手，當( flexbox )與Grid 結合使用時，可以幫助您創作出以前無法在 CSS 中實現的佈局。 ★ 定義行與列的屬性  ★ 使用 grid-template-columns 和 grid-template-rows 屬性在我們的網格上定義行和列。這個例子我們運用了 200px 來建立預設的欄位寬度，子元素將會以 200px 的尺寸在 Grid 裏呈現。 See the Pen <a href='https://codepen.io/barbow/pen/rYZqmp/'>rYZqmp</a> by Melissa (<a href='https://codepen.io/barbow'>@barbow</a>) on <a href='https://codepen.io'>CodePen&...