React Native flexBox佈局小結

 粗略的總結了一下ReactNative中的flexBox佈局樣式風格，有些圖片是在網上找的，但能夠看明白的。

1.flexDirection:決定佈局主軸方向,該屬性決定主軸的方向（即項目的排列方向）。
row：主軸爲水平方向，起點在左端。

row-reverse：主軸爲水平方向，起點在右端。

column(默認值)：主軸爲垂直方向，起點在上沿。

column-reverse：主軸爲垂直方向，起點在下沿。

 

2.justifyContent：決定其子元素沿主軸的排列方式；

（1）flex-start(默認值)：伸縮項目向一行的起始位置靠齊。

(2) center: 伸縮項目向一行的中間位置靠齊。

(3) flex-end: 伸縮項目向一行的結束位置靠齊。

(4) space-around: 伸縮項目會平均地分佈在行裏，兩端保留一半的空間。

 

(5) space-between: 兩端對齊，項目之間的間隔都相等。

 

(6) space-evenly：項目之間和兩端之間都是等間距分佈

 

3.alignItems容器屬性:`flex-start | flex-end | center | baseline | stretch`

定義項目在交叉軸上如何對齊，能夠把其想像成側軸（垂直於主軸）的「對齊方式」。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊 。

center：交叉軸的中點對齊。

baseline：項目的第一行文字的基線對齊。

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

這裏不一一試了，以下圖（從網上弄下來的）：

4.flexWrap：默認狀況下，容器中的Item元素都排列在一條軸線上，flex-wrap屬性定義了若是在一條軸線上排列不下全部的Item元素，能夠進行換行排列

 （1）nowrap（默認值）：不換行

（2）wrap：換行，第一行在上方

 

（3）wrap-reverse：換行，第一行在下方