前言
今天我們先過一過Flex的屬性的用法，再通過一個Flex的小遊戲，來深入學習Flex佈局。小遊戲連接（https://flexboxfroggy.com），在文章最後將附上參考答案。
Flex屬性
flex-direction
先說一下，在Flex佈局，會把頁面分為兩個方向，分別是主軸和交錯軸，主軸和交錯軸是通過flex-direction來決定的，flex-direction有row、column、column-reverse、row-reverse。
舉個例子，若設定了flex-direction: row，則主軸是行（水平）方向，交錯軸則是列（垂直）方向。
justify-content
這個justify-content屬性是設置上面所說的主軸的排序方向，選項有flex-start、flex-end、center、space-between、space-around。
具體它們有甚麼區別，來看看下圖。
align-items
align-items是justify-content是交錯軸版本，選項有flex-start、flex-end、baseline、center、stretch。
align-content
align-content是align-items是多行版本，選項有flex-start、flex-end、center、stretch、space-center、space-around。
內元件的屬性
在Flex中，分為外容器和內元件，外容器是在聲明display:flex的標籤，被外容器包含著的標籤則是內元件，上述所講的屬性都是用外容器上的。
而在內元件中則有以下幾個屬性可以設置，分別flex-grow、flex-shrink、flex-basis、align-self和order。
- flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
- flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。
- flex-basis: 元件的基準值，可使用不同的單位值。
- align-self: align-self 可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。
- order: 這是一個相當特別的屬性，可以重新定義元件的排列順序，順序會依據數值的大小排列。
Flexbox Froggy 答案
1) justify-content: flex-end;
2) justify-content: center;
3) justify-content: space-around;
4) justify-content: space-between;
5) align-items: flex-end;
6) align-items: center;
justify-content: center;
7) justify-content: space-around;
8) flex-direction: row-reverse;
9) flex-direction: column;
10) flex-direction: row-reverse;
justify-content: flex-end;
11) flex-direction: column;
justify-content: flex-end;
12) flex-direction: column-reverse;
justify-content: space-between;
13) flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
14) order: 1;
15) order: -3;
16) align-self: flex-end;
17) align-self: flex-end;
order: 1;
18) flex-wrap: wrap;
19) flex-direction: column;
flex-wrap: wrap;
20) flex-flow: column wrap;
21) align-content: flex-start;
22) align-content: flex-end;
23) flex-direction: column-reverse;
align-content: center;
24) flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;