空間佈局屬性說明

1.justify-content

用來控制主軸(水平)如何分配對齊

如果要改垂直對齊的話+上 flex-direction : column

2.align-item

他是控制子項目再交叉軸(垂直)的對齊方式

3.flex-shrink

收縮性! 當空間不足時預設會是1，等於是把子項目變短，縮起來

可以看這個範例會更清楚 :

4.flex-grow

子元素「伸展」比例分配：數字，無單位，預設值為 0，不可為負值。

flex-grow 尚未進行設定時，不會將剩餘空間分配給子元素做長度「伸展」，設定為 1 長度會進行彈性變化。分配的比例會依照設定的數值進行配置

可以看這個範例會更清楚 :