justify-content 與 align-items

justify-content：是依照主軸的狀況來進行對齊，因此要確認 flex-direction 的設定值，預設值為 row 左至右

各屬性參數如下，參考圖面會比較了解，flex-direction：row

• flex-start：對齊起始點(靠左對齊)
• flex-end：對齊終點(靠右對齊)
• center：對齊中間(置中對齊)
• space-between：與外容器無間隔(前後不留)，剩下的空間平均分配(依下圖分 2 份)
• space-around：與外容器有間隔(前後有留)，以內元件數均分(依下圖分 3 份)，前後 2 側各半
• space-around：與外容器有間隔(前後有留)，剩下的空間依前後與間隔平均分配(依下圖分 4 份)

align-items：是依照主軸的狀況來進行對齊，因此要確認 flex-direction 的設定值，預設值為 row 左至右，因此交錯軸為上至下

各屬性參數如下，參考圖面會比較了解，flex-direction：row

• flex-start：對齊起始點(靠上對齊)
• flex-end：對齊終點(靠下對齊)
• center：對齊中間(垂直置中對齊)
• stretch：內元件填滿整個容器
• baseline：依照內元件的基準線(文字)對齊
  

flex-wrap

flex-wrap：就是換行屬性，當內元件數量超過外容器大小時，就會超出
各屬性如下，假設 flex-direction：row

• nowrap：單行(預設值)
• wrap：多行，超出的往下換行（因交錯軸為↓)
• wrap-reverse：多行，超出的往上換行（因交錯軸反轉後為↑)

flex-flow

flex-flow：在一開始介紹 Flex 時有提到，flex-direction 和 flex-wrap 是一個階層關係，flex-flow 其實就是 2 者的組合
前面為 flex-direction，後面為 flex-wrap

CSS

.container {
  flex-flow: column wrap;
}