Flexbox 立即上手：flex-direction, justify-content, align-items 及 align-content 說明
基礎
了解 flex-direction 以及 justify-content
flex-direction
可以先了解 row 及 column。選 row 的話排起來是橫的，從左到右排列；選
column 的話是行（英文的話比較好記憶因為 column 是柱子），從上到下排列。
justify-content
設定好 flex-direction 後，就可以來了解 justify-content
如果是 flex-direction 是
- Row 的話
- 從右開始排是 flex-start
- 從左是 flex-end
- Column 的話
- 從上是 flex-start
- 從下是 flex-end
以上都很直覺，
使用 https://the-echoplex.net/flexyboxes/ 玩一下即可上手！
中階
介紹 align-items
align-items
align-items 是用了調整在每個 items 排排站好之後，該 item 會在他的位置上會靠前、靠後、還是置中。
例如使用 flex-direction: column，來讓 items 從上到下排列；使用 justify-content: flex-end 來讓全部 items 至底之後，可以使用 align-items 來將 items 左右至中，可以想像成一般 Words 或其他文字編輯起中的放置。
進階
介紹 align-content
align-content
align-content 用來定義多行的時候怎麼分配工具。如果這個 flex-container 只有一行，沒有 wrap 的話就無效。
了解這些之後就可以看懂官方使用主軸線的說明：
- Row 的話，主軸線是水平線
- Column，主軸線是垂直線
justify-content 是排列 item 在主軸線上的位置
align-items 是排列 item 在主軸線的垂直線上的位置
align-content 是在有多個主軸線的時候，主軸線彼此之間的排列
