.flex { justify-content : row ; /*flex-end || center || space-around || space-between*/

justify-content: flex-start ：靠齊「主軸線」的「 main start 」排列。

justify-content: flex-end ：靠齊「主軸線」的「 main end 」排列。

justify-content: center ：對齊「主軸線」的中心位置排列。

justify-content: space-around ：將容器的項目間距平均分布「主軸線」。

justify-content: space-between ：容器內項目兩側靠齊容器，其餘平均分布。

align-items: flex-start ：靠齊「交錯軸」的「 cross start 」排列。

align-items: flex-end ：靠齊「交錯軸」的「 cross end 」排列。

align-items: center ：對齊「交錯軸」的中心位置排列。

align-items: baseline ：以容器內的 flex 項目的基線作為對齊標準。

align-items: stretch ：將 flex 項目全部撐開與容器的高度相同，如果 flex 項目有設定高度，則會以設定的為主，不會撐開。

( 下圖皆以預設值 flex-direction: row ; flex-wrap: wrap 排列 )

align-content: flex-start ：靠齊「交錯軸」的「 cross start 」排列。

align- content: flex-end ：靠齊「交錯軸」的「 cross end 」排列。

align- content: center ：對齊「交錯軸」的中心位置排列。

align- content: space-around ：平均分布。

align- content: space-between ：容器內項目兩側靠齊容器，其餘平均分布。

align- content: stretch ：將 flex 項目的高度撐開，如果 flex 項目有設定高度，則會以設定的為主，不會撐開。

flex屬性預設為flex: 0 1 auto，不進行寬度放大的調整，以內部元素設定尺寸為主，但當外部容器無法容下內部元素總寬度時，就會進行比例的縮小，所以才有辦法自適應。Flex屬性也提供了兩個快速值，auto與none，代表意思為：

auto ： 1 1 auto

none ： 0 0 auto