1、flex布局基本概念
flex是Flexible Box的縮寫姑子，意為"彈性布局"乎婿，用來為盒狀模型提供最大的靈活性。采用flex布局的元素街佑，稱為flex容器（flex Container）谢翎，簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員沐旨，稱為flex項(xiàng)目（flex item）森逮，簡(jiǎn)稱"項(xiàng)目"。如下圖所示：
容器默認(rèn)存在兩根軸：主軸（main axis）和交叉軸（cross axis）磁携。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start褒侧，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start谊迄，結(jié)束位置叫做cross end闷供。項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size统诺，占據(jù)的交叉軸空間叫做cross size歪脏。Flex布局與Android的線性布局（LinearLayout）有點(diǎn)類似，都可以設(shè)置布局方向篙议，對(duì)齊方式唾糯，以及項(xiàng)目的布局占位權(quán)重，區(qū)別是flex容器中項(xiàng)目分布的總長度超出屏幕寬度鬼贱，超出的那部分項(xiàng)目不可見移怯，項(xiàng)目不會(huì)變形，或者可以設(shè)置flexWrap屬性这难，讓容器可以分行布局舟误，所有項(xiàng)目都能顯示出來。
2 姻乓、flex基本屬性
flex屬性可以分為容器屬性和項(xiàng)目屬性 其中容器屬性包括：
flexDirection
justifyContent
alignItems
flexWrap```
項(xiàng)目屬性包括：
flex
alignSelf
### 2.1 容器屬性
####2.1-1嵌溢、`flexDirection`：布局方向決定主軸的方向，默認(rèn)值是column蹋岩，即縱向布局
|值 |描述 |
|------|--------------------|
|`row` |橫向布局赖草，主軸為水平方向|
|`column`|縱向布局，主軸為豎直方向|
`row`:
`column`:
####2.1-2剪个、`justifyContent`：主軸方向?qū)R方式
|值 | 描述 |
|-------------|-----------------------|
|`flex-start` | 主軸開端 |
|`center` | 居中 |
|`flex-end` | 主軸末端 |
|`space-between`| 項(xiàng)目與項(xiàng)目之間插入相等空隙 |
|`space-around` | 項(xiàng)目兩旁插入相等空隙 |
**`flex-start`**：主軸開端
**`center`**：主軸的中間位置
**`flex-end`**：主軸的末端位置**`space-between`**：項(xiàng)目與項(xiàng)目之間插入相同距離的空隙**`space-around`**：項(xiàng)目兩旁插入相同距離的空隙
####2.1-3秧骑、`alignItems`：交叉軸方向?qū)R方式
默認(rèn)值flex-start，即交叉軸開端
|值 | 描述 |
|----------|----------|
|flex-start| 交叉軸開端 |
|center | 交叉軸居中 |
|flex-end | 交叉軸末端 |
**`flex-start`**：交叉軸開端**`center`**：交叉軸的中間位置**`flex-end`**：交叉軸的末端位置
####2.1-4、`flexWrap`：包含內(nèi)容
默認(rèn)值是nowrap乎折，不包裹所有內(nèi)容
|值 |描述 |
|------|--------------------------------------------------------|
|nowrap|項(xiàng)目沿主軸方向布局绒疗，超出容器長度的部分不可見 |
|wrap |項(xiàng)目沿主軸布局所需長度大于容器總長度時(shí)，分行布局骂澄，所有項(xiàng)目內(nèi)容都可見|
**`nowrap`**：不包裹內(nèi)容**`wrap`**：包裹內(nèi)容
###2.2 項(xiàng)目屬性
####2.2-1吓蘑、**`flex`**：布局權(quán)重
|值 |描述 |
|---|----------|
|>=0|項(xiàng)目占位權(quán)重|
`1:0`：flex=0的項(xiàng)目占用空間僅為內(nèi)容所需空間，flex=1的項(xiàng)目會(huì)占據(jù)其余所有空間`2:1`：`1:1:1:1`:
總結(jié)：
`flex:0` ：代表著有多大就占多少空間
`flex:n` :代表著在剩余空間中占的比例為（n/總空間）
####2.2-2坟冲、alignSelf：項(xiàng)目交叉軸方向**`自身`**對(duì)齊方式
|值 |描述|
|----------|---|
|flex-start|開端|
|center |居中|
|flex-end |末端|
####3 Layout的其他屬性ayout除了flex屬性之外磨镶，當(dāng)然還有其他屬性
width: ReactPropTypes.number,
height: ReactPropTypes.number,
top: ReactPropTypes.number,
left: ReactPropTypes.number,
right: ReactPropTypes.number,
bottom: ReactPropTypes.number,
margin: ReactPropTypes.number,
marginVertical: ReactPropTypes.number,
marginHorizontal: ReactPropTypes.number,
marginTop: ReactPropTypes.number,
marginBottom: ReactPropTypes.number,
marginLeft: ReactPropTypes.number,
marginRight: ReactPropTypes.number,
padding: ReactPropTypes.number,
paddingVertical: ReactPropTypes.number,
paddingHorizontal: ReactPropTypes.number,
paddingTop: ReactPropTypes.number,
paddingBottom: ReactPropTypes.number,
paddingLeft: ReactPropTypes.number,
paddingRight: ReactPropTypes.number,
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,
|屬性 |類型 |描述 |
|---------------------|------|-----------------------------------|
|width |number|容器或者項(xiàng)目的寬度 |
|height |number|容器或者項(xiàng)目的高度 |
|top,bottom,left,right|number|在父容器的上下左右偏移量 |
|margin |number|留邊，留邊的空間不屬于容器或者項(xiàng)目自身空間|
|marginHorizontal |number|水平方向留邊 |
|marginVertical |number|垂直方向留邊 |
|padding |number|填充樱衷，填充的空間輸入容器或者項(xiàng)目自身空間 |
|paddingHorizontal |number|水平方向填充 |
|paddingVertical |number|垂直方向填充 |
|borderWidth |number|邊界寬度 |
|position |enum |位置方式：absolute與relative |
`position`：默認(rèn)值為relative
|值 |描述 |
|--------|------|
|absolute|絕對(duì)布局|
|relative|相對(duì)布局|
react的默認(rèn)位置方式是relative棋嘲，項(xiàng)目是一個(gè)接一個(gè)排列下去的，absolute為絕對(duì)布局矩桂，一般會(huì)與left和top屬性一起使用沸移。有時(shí)候我們需要實(shí)現(xiàn)某些項(xiàng)目重疊起來，absolute屬性就能發(fā)揮作用了侄榴，例如下圖：react的基本組件暫時(shí)不支持以圖片作為背景雹锣，所以這里的的轉(zhuǎn)入是一個(gè)文本組件，而紅色的圓形是一個(gè)圖片組件癞蚕，在iOS里面組件也可以作為容器蕊爵，圖片可以正常顯示，但是在Android里面桦山，可能存在些問題攒射，如果使用組件作為容器都會(huì)出現(xiàn)圖片變得好奇怪，所以就可以absoulte來解決問題了恒水。代碼如下：
```<View style={{width:80,height:80,alignItems:'center',justifyContent:'center'}}> <Image style={{position:'absolute',left:0,top:0,resizeMode:'contain',width:80,height:80}} source={require('image!finance_usercenter_ic_into')}/> <Text style={{width:80,textAlign:'center',color:'white',fontSize:16}}>轉(zhuǎn)入</Text></View>
這里的View跟Android的View有點(diǎn)不一樣会放，View是可以作為容器也可以作為項(xiàng)目，View作為容器還有其他很多屬性钉凌，例如backgroundColor咧最，borderWidth，borderColor御雕，opacity等等矢沿，這里不一一介紹。
4 布局的尺寸說明
react native的寬高是不需要帶單位的酸纲，那些width捣鲸，height，padding闽坡，margin的賦值都直接是數(shù)字的摄狱，當(dāng)你設(shè)定width:10脓诡，在IOS的話就是設(shè)置了10pt寬度，而在Android上面是10dp媒役，在做項(xiàng)目時(shí)，辛勤的美工會(huì)幫我們標(biāo)出所有UI控件的寬宪迟，高酣衷，邊距等等，他們用的單位也是dp次泽，所以賦值style中寬高時(shí)穿仪，直接填入數(shù)字即可。
