FlexBox佈局

屬性1:flexDirection

row:按行進行排列

column:按列進行排列

屬性2:justifyContent-在元件的style中指定justifyContent可以決定其子元素沿著主軸的排列方式。

flex-start：伸縮專案與父容器左端靠齊。

flex-end：與父容器右端靠齊。

center：水平居中。

space-between：第一個子元件位於父容器左端，最後一個子元件位於父容器最右端。然後平均分配在父容器水平方向上。

space-around：所有子元件平均分配在父容器的水平方向上，左右都有留隙。

屬性3:alignItems -決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）的排列方式

flex-start：與父元件的頂部對齊

flex-end：與父元件的底部對齊

center：處於父容器的中間位置

stretch：豎直上填充整個容器

屬性4:alignSelf-設定子控制元件自身在父控制元件的對齊方式

auto:按照自身設定的寬高來顯示，如果沒設定，效果跟streth一樣。

flex-start:與父容器頂部對齊。

flex-end:與父容器底部對齊。

center:位於垂直位置。

streth:垂直拉伸。

屬性4: flex-設定伸縮專案的伸縮樣式

如果在同一個父控制元件中,沒設定寬度的幾個控制元件按行排列,設定flex為1，2，4

flex為2的元件寬度為flex為1寬度的兩倍，flex為4元件寬度則為flex為1的元件寬度的4倍。

解釋：justifyContent指順著指定的主軸進行排列－－可以理解為如果指定主軸（即derection）為row，即為子控制元件在X軸上面一個一個依次排列，並且在X軸上面的排列方式為指定的方式。

例：指定direction為row，jsutifyContent為center，alignItems為center。我理解的是把3個控制元件放好，放好後看作一個整體，放在主軸的中心（center），次軸的中心（center）

例：指定direction為row，jsutifyContent為flex－start，alignItems為center。我理解的是把3個控制元件放好，放好後看作一個整體，放在主軸的左邊（flex－start），次軸的中心（center）