推薦這一個學習網站 http://flexboxfroggy.com/

透過把青蛙歸位的遊戲學習 flexbox。

這個連結我收藏很久，今天終於有時間來玩玩，順便筆記一下。

玩過遊戲後，再去讀取相關文件更容易懂了！

延伸閱讀 ：

深入解析 CSS Flexbox

學習 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: 每一行都被拉伸以填滿容器。

這篇文章 【CSS】flexbox 最早出現於 任姓人妻 の 生活紀錄。