flexbox 光看文字說明有時候很難理解，透過遊戲實作方式就比較容易理解。
推薦這一個學習網站 http://flexboxfroggy.com/
透過把青蛙歸位的遊戲學習 flexbox。
這個連結我收藏很久，今天終於有時間來玩玩，順便筆記一下。
玩過遊戲後，再去讀取相關文件更容易懂了！
延伸閱讀 ：
justify-content 水平對齊
-
flex-start: 元素和容器的左端對齊。 -
flex-end: 元素和容器的右端對齊。 -
center: 元素和容器裏居中。 -
space-between: 元素之間保持相等的距離。 -
space-around: 元素周圍保持相等的距離。
align-items 垂直對齊
-
flex-start: 元素與容器的頂部對齊。 -
flex-end: 元素與容器的底部對齊。 -
center: 元素縱向居中。 -
baseline: 元素在容器的基線位置表現。 -
stretch: 元素被拉伸以填滿整個容器。
flex-direction 擺放方向
-
row: 元素擺放的方向和文字方向一致。 （由左到右） -
row-reverse: 元素擺放的方向和文字的方向相反 （由右到左） -
column: 元素從上放到下。 -
column-reverse: 元素從下放到上。
- 當你變更水平/垂直方向時，flex-start 和 flex-end 方向也會相反。
- 當 flex-direction: column 或 flex-direction: column-reverse (垂直方向) 時，justify-content 控制垂直方向，align-items 控制水平方向。
order 排列順序
預設值為 0， 可以輸入負數或正數
align-self 控制單個元素
用法跟 align-item 一樣
flex-wrap 分離元素
-
nowrap: 所有的元素都在一行。 -
wrap: 元素自動換成多行。 -
wrap-reverse: 元素自動換成逆向的多行
flex-flow
等同於 flex-direction 跟 flex-wrap 的縮寫。
flex-direction 跟 flex-wrap 常常被一同使用，所以延伸出 flex-flow。
flex-flow: row wrap; //中間用空白隔開
align-content 決定行與行的間隔
只有一行的時候 是沒有作用的
-
flex-start: 多行都集中在頂部。 -
space-between: 行與行之間保持相等距離。 -
space-around: 每行的周圍保持相等距離。 -
stretch: 每一行都被拉伸以填滿容器。
