Web Design Laboratory
要使用 Flexbox 必須先定義一個父元素容器，並於父元素定義 display 屬性為 flex 或 inline-flex
flex：Flexbox 的常用屬性，後方的元素會換行
inline-flex：類似於 inline-block 加 flex，在後方的元素不會換行
當多個子元素超過父元素的寬度時，flex-wrap 可以決定是否將子元素換行
wrap：換行，超出父元素寬度的子元素會換到下一行
nowrap：預設值，不換行，子元素會縮短以符合父元素的寬度
wrap-reverse：反向換行，也就是各行的順序會顛倒
justify-content 決定水平對齊的位置。
flex-start：預設值，靠左對齊
flex-end：靠右對齊
center：置中對齊
space-between：平均分配，左右貼齊父元素
space-around：平均分配，類似 margin 的概念
space-evenly：平均分配，每個間距都是相同寬度
align-items 決定垂直對齊的位置。
flex-start：靠上方對齊
flex-end：靠下方對齊
center：置中對齊
stretch：預設值，所有元素撐開與父元素同
baseline：依元素的基準線對齊
是可以崁入到網頁上的，也可以直接做線上編輯。
See the Pen Untitled by 周平（瑪雅網路科技） (@vzhzchpn-the-vuer) on CodePen.