React Native——flex布局

React Native——flex布局
flex布局基本概念

　　flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。採用flex布局的元素，稱為flex容器(flex container)，簡稱”容器”。它的所有子項目自動成為容器成員，稱為flex項目(flex item)，簡稱”項目”。

　　

 

　　容器預設存在兩根軸：主軸(main axis)和交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start，結束位置叫做main end;交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目預設沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。容器屬性：

　　flexDirection：布局方向，決定主軸的方向，預設值是column，即縱向布局

　　row |橫向布局，主軸為水平方向

　

column"縱向布局，主軸為豎直方向
vcq9o6zErMjP1rXKx2ZsZXgtc3RhcnSjrLy01vfW4bXEv6q2yzwvc3Ryb25nPjwvcD4NCjxwPmZsZXgtc3RhcnSjutb31uG/qrbLPC9wPg0KPHA+Y2VudGVyo7rW99bhtcTW0LzkzrvWwzxiciAvPg0KPGltZyBhbHQ9"這裡寫圖片描述" src="http://www.bkjia.com/uploads/allimg/160416/043430J12-3.png" title="\" />

flex-end：主軸的末端位置

space-between：項目與項目之間插入相同距離的空隙

space-around：項目兩旁插入相同距離的空隙

alignItems：交叉軸方向對齊，預設值flex-start，即交叉軸開端

flex-start：交叉軸開端

center：交叉軸的中間位置

flex-end：交叉軸的末端位置

flexWrap：包含內容，預設值是nowrap，不包裹所有內容

nowrap：不包裹內容

wrap：包裹內容

flex：布局權重
1:0 flex=0的項目佔用空間僅為內容所需空間，flex=1的項目會佔據其餘所有空間

1：1